css导航条的设计 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="./reset.css">
  7     <style>
  8     /*设置nav的大小*/
  9     .nav{
 10         width:1210px;
 11         height:48px;
 12         background-color:#E8E7E3;
 13         margin:100px auto;
 14     }
 15     /*设置nav中的li*/
 16      
 17     .nav li{
 18         /*设置li设置浮动，使其横向摆列*/
 19         float:left;
 20         /*设置Li的高度*/
 21         /*将文字在父元素中居中*/
 22         line-height:48px;
 23      
 24     }
 25      
 26     /*设置a的样式*/
 27     .nav a{
 28         /*将a转化为块元素*/
 29         display:block;
 30         text-decoration:none;
 31         color:#777;
 32         font-size:18px;
 33         padding:0 40px;
 34      
 35     }                                                              
 36     /*设置鼠标移入的效果*/
 37     .nav a:hover{
 38         background-color:#3F3F3F;
 39         color:#E8E7E3;
 40      
 41     }
 42      
 43     </style>
 44 </head> 
 45 <body>  
 46     <ul class="nav">
 47         <li><a href="#">HTML/CSS</a></li>
 48         <li><a href="#">Browser Side</a></li>
 49         <li><a href="#">Server Side</a></li>
 50         <li><a href="#">Programming</a></li>
 51         <li><a href="#">XML</a></li>
 52         <li><a href="#">Web Building</a></li>
 53         <li><a href="#">Reference</a></li>
 54     </ul>
 55 </body>
 56 </html>

显示效果

posted @ 2020-11-16 11:18  zou-ting-rong  阅读(160)  评论(0)  编辑  收藏  举报