页面中导航条怎么制作

2021-08-05 16:33:20 阅读：149 来源： 互联网

标签：right color 制作 li header 导航条 0px border 页面

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

第一个导航条展示

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

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

标签：right,color,制作,li,header,导航条,0px,border,页面
来源： https://www.cnblogs.com/thankspipi/p/15103954.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

页面中导航条怎么制作