zoukankan      html  css  js  c++  java
  • 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>

    显示效果

    笨鸟先飞
  • 相关阅读:
    《你的灯还亮着吗》读后感1
    找"1"
    阅读计划---《梦断代码》3
    阅读计划---《梦断代码》2
    个人工作总结(10)
    个人工作总结(9)
    个人工作总结(8)
    个人工作总结(7)
    学习进度条
    个人工作总结(6)
  • 原文地址:https://www.cnblogs.com/zoutingrong/p/13984204.html
Copyright © 2011-2022 走看看