开发者学堂课程【移动 Web 前端开发：页面-顶部通栏 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8451
页面-顶部通栏
目录：
一、顶部通栏测试代码
二、选择器
三、按钮
一、测试代码
1. Index.html（讲解中会用到）
微金所-25期
”stylesheet”href=”css/index.css”>
//不添加，直接设置盒子以及所占容器份数
< / header>< html>
2. Index.css
/*common css 公用样式*
/*model css 模块样式*/
.wjs_topBar{
//不设置高度
Border_bottom:1px soild #ccc
}
.wjs_topBar > .container{
//设置行高
Height:40px
Text-aliggn:center
}
.wjs_topBar > .container
div{
//设置高度40
Height:40px
Boder-left:1px soild #ccc
}
.wjs_topBar > .container > div:first-child{
border-left: none;
二、选择器实现
1.加号选择器
加号选择器（"+"）：就是指对找到的某类的元素除第一个元素以外的兄弟元素起作用，即第一个元素不起作用，后面的兄弟元素都会起作用：
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 (Adjacent sibling selector)。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的 p 元素（需要满足 h1 和 p 元素拥有共同的父元素）”
CSS选择符目前有下面这几个：后代选择符空格（ ）、子选择符箭头（>）、相邻兄弟选择符加号（+）、随后兄弟选择符弯弯（~）和列选择符双管道（||）。其中对于前4个选择符，浏览器支持的时间较早，非常实用，是本章的重点。最后的列选择符算是“新贵”，与Table等布局密切相关，但目前浏览器的兼容性还不足以使它被实际应用
2.波浪号选择器
波浪选择器用来选择所有匹配到的兄弟元素
<!--顶部通栏--〉
cheader class= "wjs_topBar",
<div class="col-md-2">
classe=”wjs_app” href="#" >
classe=”wjs_icon_wjs_icon_phone>
手机微金所
classe=”glyphicon-menu-down”>
</div>
<div class="col-md-5">2</div>
400-89-4006(服务时间：9：00-21：00)
<div class="col-md-2">3</div>
常见问题
财富登录
<div class="col-md-3">4</div>
免费注册
登录
</div>
/*common css公用样式*/
Body{
Font-size:14px;
Font-family:”Microsoft YaHei,sans-serif
}
a{
Color:#666;
}
a:hover{
Color:#666;
Text-decoration:now
}
/*使用自定义字体图标/
@font-face (
font-family: wjs_font_icon;
src:
url(../fonts/MiFie-Web-Font . woff) format('woff'),
url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
url(../fonts/MiFie-Web-Font . svg) format('svg' ),
url(../fonts/MiFie-web-Font.eot) format(' embedded-opentype' );
}
/*定义使用字体的类*/
.wjs_ icon{
font -family: wjs_font_icon;
}
/*具体到图标的类*/
wjs_icon_phone: :before{
content :"\e908";
}
/*model css模块样式*/
.wjs_topBar{
border-bottom: 1px solid #ccc;
}
.wjs_topBar > . container{
line-height: 40px;
text-align: center;
}
.wjs_topBar > . container > div{
height: 40px;
border-left: 1px solid #ccc;
}
.wjs_topBar > . container > div:first-child{
border-left: none;
}
/*例外的两种实现方式*/
/*+ ~*/
.wjs_topBar > . container > div{
height: 40px;
}
.wjs_topBar > . container > div+div{
border-left:1px solid #ccc;
}
.wjs_app{
Position:relative;
}
.wjs_app img{
Dispiay:none;
}
.wjs_app:hover img{
Dispiay:block;
position:absolute;
left: 50%;
top: 40px;
margin-left: -60px;
border: 1pxsolid #ccc;
Border-top:none;
}
例如
="UTF-8">I
body(
font-size: 40px;
}
#four ~ li(
color: red;
}
结果
注意*~选择器 先找到选择器的元素 然后照这个元素的后面所有统计的元素
三、按钮
1.概念
可作为按钮使用的标签或元素
为,cbutton 或元素添加按钮类 ( button class )即可使用 Bootstrap 提供的样式。
2.示例
针对组件的注意事项
虽然按钮类可以应用到
链接被作为按钮使用时的注意事项
如果〈a〉元素被作为按钮使用--并用于在当前页面触发某些功能--而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button”属性。
