2016-01-21

第一次自己完整的做出一个导航条，尽管没有过多的样式，期待更多的第一次。

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6         <title>myFirstNavbar</title>
  7         <style>
  8             *{
  9                 margin:0;
 10                 padding:0;
 11             }
 12             body{
 13                 max-width:100%
 14             }
 15             header{
 16                 width:100%;
 17                 background-color:#000;
 18             }
 19             nav{
 20                 margin:0 auto;
 21                 width:1000px;
 22                 height:50px;
 23             }
 24             ul,li{
 25                 list-style-type:none;
 26             }
 27             a{
 28                 color:#fff;
 29                 font-weight:600;
 30                 text-decoration:none;
 31             }
 32             .level0{
 33                 display:inline-block;
 34                 position:relative;
 35                 float:left;
 36                 padding-top:15px;
 37                 width:85px;
 38                 height:35px;
 39                 text-align:center;
 40                 border-bottom:2px solid #fff;
 41                 cursor:pointer;
 42             }
 43             .level0:hover{
 44                 background-color:#aaa;
 45             }
 46             ul li:hover:after{
 47                 content:"";
 48                 position:absolute;
 49                 top:50px;
 50                 left:0;
 51                 height:2px;
 52                 background-color:#1FAEFF;
 53                 animation:longer 1s;
 54                 -moz-animation:longer 1s;
 55                 -webkit-animation:longer 1s;
 56                 -o-animation:longer 1s;
 57             }
 58             ul ul{
 59                 display:none;
 60             }
 61             ul li:hover ul{
 62                 display:block;
 63                 position:absolute;
 64                 top:52px;
 65             }
 66             ul ul li{
 67                 position:relative;
 68                 padding-top:15px;
 69                 width:85px;
 70                 height:35px;
 71                 background-color:#000;
 72                 border-bottom:2px solid #fff;
 73                 border-radius:4px;
 74             }
 75             ul ul li:hover{
 76                 background-color:#aaa;
 77             }    
 78             @keyframes longer{
 79                 from{width:0;}
 80                 to{width:85px;}
 81             }
 82             @-moz-keyframes longer{
 83                 from{width:0;}
 84                 to{width:85px;}
 85             }
 86             @-webkit-keyframes longer{
 87                 from{width:0;}
 88                 to{width:85px;}
 89             }
 90             @-o-keyframes longer{
 91                 from{width:0;}
 92                 to{width:85px;}
 93             }
 94         </style>
 95     </head>
 96     <body>
 97         <header>
 98             <nav>
 99                 <ul>
100                     <li class="level0"><a>Home</a></li>
101                     <li class="level0"><a>News</a>
102                         <ul>
103                             <li><a>Past</a></li>
104                             <li><a>Today</a></li>
105                             <li><a>Future</a></li>
106                         </ul>
107                     </li>
108                     <li class="level0"><a>Blog</a>
109                         <ul>
110                             <li><a>Blog</a></li>
111                             <li><a>Github</a></li>
112                         </ul>
113                     </li>
114                     <li class="level0"><a>About</a></li>
115                 </ul>
116             </nav>
117         </header>
118     </body>
119 </html>

 

posted @ 2016-01-21 19:33  FantasyDL  阅读(109)  评论(0)    收藏  举报