导航条不要搞一些花里胡哨的东西，就一个无序列表去搭结构！！！！！

第一个导航条展示

 

 

   <header class="header">
        <a href="#"><img src="./images/img_03.png" alt="logo"></a>
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">服务热线</a></li>
        </ul>

    </header>

 

　　

 1 .header {
 2     height: 84px;
 3     background-color: #ffffff;
 4     border-left: 1px solid #cacaca;
 5     border-right: 1px solid #cacaca;
 6 }
 7 
 8 .header img {
 9     margin: 19px 0px 0px 26px;
10 }
　　
/*********************重要代码出现********************/

11 
12 .header ul {
13     float: right;
14     margin-top: 45px;
15 }
16 
17 .header li {
18     float: left;
19 }
20 
21 .header li a {
22     /* 块级元素的宽高才起作用 */
23     display: block;
24     height: 8px;
25     border-right: 1px solid #cacaca;
26     /* 上面这些都是为了实现右边那个短短的border效果 */
27     padding: 0px 9px 0px 7px;
28     font-size: 12px;
29     line-height: 8px;
30     color: #6d6d6d;
31 }
32 
33 .header li:last-of-type a {
34     color: red;
35     border-right: none;
36 }

 

第二个导航条

 

 

 1     <nav class="nav">
 2         <ul>
 3             <li><a href="#">关于我们</a></li>
 4             <li><a href="#">公司业绩</a></li>
 5             <li><a href="#">业务中心</a></li>
 6             <li><a href="#">关于我们</a></li>
 7             <li><a href="#">关于我们</a></li>
 8             <li><a href="#">关于与我们</a></li>
 9         </ul>
10     </nav>

 

css代码

.nav {
    height: 31px;
    background-color: #1f5a96;
    margin: 0px 0px 5px 0px;
}

.nav li {
    float: left;
    /* 固定宽高 水平 垂直居中 */
    width: 112px;
    text-align: center;
    line-height: 31px;
    border-right: 1px solid #387eb2;
}

.nav li:last-child {
    border-right: none;
}

.nav a {
    font-size: 12px;
    color: #fbffff;
}

后续会持续更新新的导航条制作！