导航条设计

 

 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>

 

posted @ 2019-07-18 21:53  zuiaimiusi  阅读(422)  评论(0)    收藏  举报