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>

    显示效果

    笨鸟先飞
  • 相关阅读:
    javaweb 最简单的分页技术
    Jquery选择器小结
    JSON 初探
    C# GridView 的使用
    C# 操作数据库
    Java中String为什么是不可变
    Eclipse使用技巧小结
    Java File类方法使用详解
    JSP基础语法总结
    JSP取得绝对路径
  • 原文地址:https://www.cnblogs.com/zoutingrong/p/13984204.html
Copyright © 2011-2022 走看看