开发者学堂课程【移动 Web 前端开发：产品区块-页签】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8465
产品区块-页签
产品区块-页签
先把容器勾勒出来，在 index.html 中写入：
产品区域
<div class="wjs_product">
<div class="containerf></div>
</div>
在 index.css 中修饰一下：
产品模块
.wjs_product{
padding: 30px o;
border-bottom: 1px solid #ccc;
background: #f5f5f5；
}
产品区块完成后，填充内容，在 bootstrap 有相应的组件是：
页签（标签页）
在文档中找到 javaScript 插件 里的标签页。
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"">
<li role=""presentation" classm"active"><a hrefm "thome" aria-controls= "home" rolem "tab" data-
toggle="tab”>Home</a></li>
<li role="presentation"><a href="#profile" aria-controls-
"profile"role-"tab” data-toggle="tab">Profile</a></li>
<li role="presentation"><a href= ""messages" aria-controls=
"messages"rolen"tab" data-toggle="tab">Hessages</a></li>
<li role="presentation"><a hrefm"#settings" aria-
controls="settings" role="tab" data-
toggle="tab">Settings</a></li>
</ul>
<! -- Tab panes -->
<div class=""tab-content">
<div role="tabpanel" class="tab-pane active"
id="home">...</div>
<div role="tabpanel" class="tab-pane”
id="profile">...</div>
<div role="tabpanel" class="tab-pane"
id="messages">...</div>
<div role="tabpanel" class="tab-pane"
id="settings">...</div>
</div>
</div>
这个模板相对比较简单，外层有一个大的</div>包裹，中间有两块内容：
Nav tabs（页签） 和 Tab panes（面板）
由页签控制着下面的面板，四个页签控制着下面四个面板。
Ul 是装页签用的，页签里有每个页签，每个页签里有 li 和 a，a 里 data-ggle 声明的是 tab，helf 指向的是 id， id指向的是下方面板中的内容。
将模板代码复制到 index.html 中并根据内容进行修改：
将 li 里面的 role 和 a 里面的容器全部删除。
<! -- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
href="#home' //目标控制元素
data-toggle="tab' //声明是一个标签页组件
<li class="active"><a href="#wjs product tab01" data-toggle="tab">特别推荐</a></li>
<li><a href="#wjs product tab02" data-toggle="tab">微平台</a></li>
<li><a href="#wjs product tab03" data-toggle="tab">微平台</a></li>
<li><a href="#wjs product tab04" data-toggle="tab">微平台</a></li>
<li><a href="#wjs product tab05" data-toggle="tab">微平台</a></li>
<li><a href="#wjs product tab06" data-toggle="tab">微平台</a></li>
<li><a href="#wjs product tab07" data-toggle="tab">微平台</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="wjs product tab01">1</div>
<div class="tab-pane" id="wjs product tab02">2</div>
<div class="tab-pane" id="wjs product tab03">3</div>
<div class="tab-pane" id="wjs product tab04">4</div>
<div class="tab-pane" id="wjs product tab05">5</div>
<div class="tab-pane" id="wjs product tab06">6</div>
<div class="tab-pane" id="wjs product tab07">7</div>
</ div>
结构改好后，覆盖选择器，重置样式。
覆盖选择器：
找到 nav 或者 nav-tabs 的源码，和它的选择器保持一致才能覆盖掉：
在 bootstrap.css 中找到 nav-tabs 源码复制 index.css 中
属于产品模块，这时不能直接修改样式，也不能再源码中修改，因为会影响其他的，
只要求我的 nav-tabs 在产品模块中有这样形式：
这时在 .nav-tabs 前加一个前缀，在保持选择器结构不一样的情况下提高优先级：
.wjs product
这时可以放心修改了，不用关心覆没覆盖，因为这个时候是一定覆盖的，因为 bootstarp 严格遵守这样的模块，所以它的选择器涵盖了所有的元素。
修改样式：
将标签圆角去掉：
.wjs_product .nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 0；
a: hover 的时候有边框，找到普通的 a 加上 ihover 看到样式在 index.css：322，鼠标经过的时候是不需要背景的。
在 nav 前缀的代码里鼠标经过颜色不一样在 navs. Less：322，所以可以覆盖掉。
背景颜色和底色保持一致：
.wjs_product .nav-tabs > li > a: hover {
border-color: #eee #eee #ddd;
background: #f5f5f5;
鼠标经过的时候没有背景乐，但是有边框。
找到鼠标经过的地方发现只给了颜色，说明在鼠标经过以前就已经有了边框。
将边框去掉：
.wjs_product .nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: none;
border-radius: 0;
这时，鼠标经过的时候就没有边框了，可以看到每一个 a 还有一个多余的黄色：
将 Margin-right：2px 修改为 Margin-right：0 就可以了。
下方横线：
.wjs_product .nav-tabs > li {
float: left;
margin-bottom: ol;
加入切换时下边框：
color: #555;
cursor: default;
background-color: #f5f5f5;
border: none;
border-bottom: 3px solid #e92322;
加入间距：
.wjs_product .nav-tabs > li {
float: left;
margin-bottom: o;
margin-left: 15px;
导航条样式重置完成，先从结构改了改，选择器覆盖了，样式重置了接下来进行测试，看一下标签能不能符合响应式功能。
响应式测试：
超小屏设备有问题，过多的 table 切换这种情况经常有，在正常的一些外部页面里比如搜狐，在导航链接的地方有箭头，这是移动端经常处理的方式，但是这样处理很麻烦，必须排列的非常整齐。
在移动端打开网易，它有两种方案：
1.有箭头
2.滑动式显示
所以可以让其在宽度不够的情况下滑动显示。
