开发者学堂课程【移动 Web 前端开发：新闻-标签页】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8474
新闻-标签页
标签页的替换
首先先构建第二部分标签页，依然要运用到标签页的组件
页签
<!-- Nav tabs-->
Home
toggle="tab" >Profile/li>
a href-"#messages" aria-controls-"messages" role-"tab" data-
toggle-"tab" >Messages
toggle-"tab" >Settings
页签所对应的内容
.../div>
...
…
...
</div>
页签和内容是可分开使用的，然后把我们的页签放在第二部分标签的位置，内容放在该标签的第三部分内容处
<div class=”col-md-1”>
Home
-toggle="tab" >Profile/li>
a href-"#messages" data-toggle-"tab" >Messages
Settings
</div>
<div class=”col-md-7”>
</div>
填入完成后再到页面进行刷新，可以看到 Home profile Message Settings 已经显示到页面了
然后主要在于如何设计它的样子
.wjs_news .wjs_news_title: :after{
content :” “;
position: absolute;
right: -6px;
bottom: -3px;
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #ccc;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin- bottom: -1px;
}
然后在搜索列表输入.wjs_news.nav-tabs 注意这里的 Replace all 的意思是全部替换，全部替换非常危险，要小心谨慎，因为很容易操作失误。
为了安全，可以点击 Replace 一个一个替换。然后再运行一下，看它此时的样式，可以看见它已经在 index 里面显示了
.wjs_news .nav-tabs > li > a {
margin-right: 2px;
line-height: 1. 42857143;
border :1px solid transparent ;
border-radius: 4px 4px 0 0;
margin-right: 0;
width: 60px;
height: 60px;
line-height: 60px;
background: #ccc;
border-radius: 30px;
border: none;
margin-bottom: 60px; (设置间距)
padding: 0;
text-align: center;
}
, wjs_news .nav-tabs > li > a: hover {
border-color: #eee #eee #ddd;
}
.wjs_news .nav-tabs > li.active > a,
.wjs_news .nav-tabs > li.active > a:hover,
.wjs_news . nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #e92322;
border: none;
}
.wjs_news .nav-tabs. nav-justified {
width: 100%;
border-bottom: 0;
}
.wjs_news .nav-tabs. nav-justified > 1i {
float: none;
}
.wjs_news .nav-tabs .nav-justified > li > a {
样子已经整理出来了，接下来则修改它的内容
<div class=”col-md-1”>
<div class=”wjs_news_line”>
/li>
a href-"#messages" data-toggle-"tab" >
</div>
<div class=”col-md-7”>
</div>
</div>
.wjs_icon_news_01: :before {
content: "\e90e" ;
}
.wjs_icon_news_02::before {
content:"\e90f";
}
.wjs_icon_ news_03: : before {
content: "\e910";
}
.wjs_icon_ news_04: : before {
content: "\e911";
}
如需修改颜色时可在wjs_news中修改 例如：
.wjs_news .wjs_icom{
font-size:30px;
color: #fff;
}
设置中间那条线，添加代码
.wjs_news.wjs_news_line{
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
border-left: 1px dashed #ccc;
}
导一下三个系统是否具有定位性,可以看见系统默认了定位
如果设置的线过长，则可以看一下最后一个 a 的设置，或者是缩短线的长度
.wjs_news .nav-tabs > li:last-chid > a {
Margih-bottom: 0;
}
现在需要将线移动到中间的位置，需移动到线的一半
.wjs_news.wjs_news_line{
position: absolute;
top: 0;
left: 45px;
width: 1px;
height: 100%;
border-left: 1px dashed #ccc;
}
