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

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

疯狂双11!一折嗨到底!

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
如有疑问请与原作者联系

标签:AVIEHTTPQCOMmargin

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

上一篇:1+X证书学习日志 —— css样式表

下一篇:浮动和渐变色,定位position,元素的层叠顺序