前端页面所需要的css样式-导航条

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;
}