zoukankan      html  css  js  c++  java
  • 导航条设计

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>导航条</title>
     6         <script type="text/javascript">
     7             
     8         </script>
     9         
    10     <style type="text/css">
    11     *{
    12         margin: 0px;
    13         padding: 0px;
    14     }
    15     /* 去除ul前的点*/
    16     .nav{
    17         list-style: none;
    18         background-color: #6495ED;
    19         width: 1000px;
    20         margin: 50px auto;
    21         /* 解决高度塌陷 
    22         在IE6中,如果为元素指定了一个宽度,则会默认开去hasLayout
    23         */
    24         overflow: hidden;
    25     }
    26     .nav li{
    27         /* ul为设置li向左浮动 */
    28         float: left;
    29         width: 25%;
    30     }
    31     .nav a{
    32         /*
    33         为a指定一个宽度,但是a是内联元素,所以先要转换为块元素
    34         */
    35        display: block;
    36       width: 100%;
    37       /* 设置文字居中 */
    38       text-align: center;
    39       /* 设置上下内边距 */
    40       padding: 5px 0px;
    41       /* 设置字体样式 去除下划线 */
    42       text-decoration: none;
    43       /* 设置字体颜色 加粗 */
    44       color: white;
    45       font-weight: bold;
    46     }
    47     .nav a:hover{
    48         /* 伪类 设置当鼠标点击时出现其他颜色 */
    49         background-color: #c00;
    50     }
    51     </style>
    52        
    53     </head>
    54     <body>
    55      <!-- 创建导航条的结构 -->
    56      <ul class="nav">
    57             <li> <a href="#">首页</a></li>
    58             <li> <a href="#">新闻</a></li>
    59             <li><a href="#">联系</a></li>
    60             <li><a href="#">关于</a></li>
    61      </ul>
    62     </body>
    63 </html>
  • 相关阅读:
    Tomcat和nginx负载均衡算法
    (转)CSS浮动(float,clear)通俗讲解
    MvcSiteMapProvider配置使用
    idea出现jdk版本过低导致无法通过编译
    java生成自己的doc文档
    RabbitMQ的应用场景
    java 变量和常量
    IDEA创建新空项目
    java中整型、浮点型、char型扩展
    java中数据类型占多少字节
  • 原文地址:https://www.cnblogs.com/zuiaimiusi/p/11210262.html
Copyright © 2011-2022 走看看