首页 > > 网页制作 > css >

1+X学习日志——导航栏demo

2019-11-06 16:01:02来源：博客园阅读 ()

1+X学习日志——导航栏demo

初级菜鸟的作品，各位大佬见笑了 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title> </head> <style>      *{             margin:0;             padding:0;         }         ul,ol,li{             list-style:none;         }         a{             text-decoration: none;         }
        /*给a去掉下划线*/         .nav{             width: 606px;             height: 40px;             background: #ccc;             margin: 100px auto;         }                 div{             width: 100%;             height: 40px;                   /* 试图给ul加上一个整体div，使得看起来更舒服点=。= */             background: darkgrey;         }
        .nav li{             float: left;             position: relative;         }         .nav li a{             display: block;             width: 100px;             height: 40px;             background-color:darkgrey;             border-right:1px solid #fff;             text-align: center;             line-height: 40px;             font-size: 20px;             color: white;         }         .nav li a:hover{             background: darkgrey;             color: black;             text-decoration: underline;         }         .nav li .nav2{             position:absolute;             display:none;/*初始状态二级导航隐藏*/         }
        .nav li:hover .nav2{             display: block;         } </style> <body>      <div id="header">         <ul class="nav">             <li>                 <a href="#" target="_blank">网站首页</a>             </li>             <li>                 <a href="#" target="_blank">公司简介</a>             </li>             <li>                 <a href="#" target="_blank">产品类型</a>                 <ul class="nav2">                         <li>                             <a href="#">产品1</a>                         </li>                         <li>                             <a href="#">产品2</a>                         </li>                         <li>                             <a href="#">产品3</a>                         </li>                         <li>                             <a href="#">产品4</a>                         </li>                     </ul>             </li>             <li>                 <a href="#" target="_blank">新闻中心</a>             </li>             <li>                 <a href="#" target="_blank">在线招聘</a>                 <ul class="nav2">                     <li>                         <a href="#">校园招聘</a>                     </li>                     <li>                         <a href="#">实习生招聘</a>                     </li>                     <li>                         <a href="#">社会招聘</a>                     </li>                 </ul>             </li>             <li>                 <a href="#" target="_blank">联系我们</a>                 <ul class="nav2">                         <li>                             <a href="#">客服1</a>                         </li>                         <li>                             <a href="#">客服2</a>                         </li>                         <li>                             <a href="#">客服3</a>                         </li>                         <li>                             <a href="#">客服4</a>                         </li>                     </ul>             </li>         </ul>     </div>     </body> </html>

原文链接:https://www.cnblogs.com/qingmengWEB/p/11809506.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有