1. 导航条左边文字和图片布局
display:inline-block跟float的效果一样,不独占一行的块状元素,
float:left center right 是不独占一行,在一行中的左 中 右,但是不是块状元素
vertical-align:center是垂直居中,
text-align:center是水平居中,
<a class="navbar-brand" href="/">
<img src="../image/logo.png" style="height: 38px;display: inline-block;">
<span>*******网站</span>
</a>
2. 导航条中列表项,两个ul进行分开,一个是列表项,一个是登陆注册项
列表项的css:
ul{
float:left;
margin:0;
}
3. 列表项的li
li{
float:left;
position: relative;
display: block;
}
ul,li{
margin:0;
padding:0;
}
4. ul跟li不需要间隔,在li中的a标签需要设置间隔
设置距离,颜色,上下距离等,背景颜色,字体颜色
ul li a{
position: relative;
display: block;
padding: 10px 15px;
font-size: 14px;
padding-top: 19px;
padding-bottom: 19px;
color: #fff;
}