CSS导航条nav简单样式 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>CSSTest</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12 
13         .nav {
14             list-style: none;
15             background-color: #6495ed;
16             width: 1000px;
17             margin: 50px auto;
18             /*高度塌陷，子元素浮动*/
19             overflow: hidden;
20         }
21 
22         .nav li {
23             float: left;
24             /*为每个li指定一个宽度，虽然效果出来了，但是每个li
25               不具有超链接属性,易用性不好，li是a的父元素，先给父元素一个
26               宽度值，再来设置a宽度
27             */
28             width: 12.5%;
29         }
30 
31         /*当鼠标移入时改变背景颜色*/
32         .nav a:hover {
33             background-color: #c00;
34         }
35 
36         a {
37             /**为a标签指定一个宽度
38                a是一个内联元素宽度失效，转为块元素*/
39             display: inline-block;
40             width: 100%;
41             /*设置文字居中*/
42             text-align:center;
43             /*设置一个上下内边距*/
44             padding: 5px 0;
45             /*去除下划线*/
46             text-decoration: none;
47             /*字体颜色设置*/
48             color: white;
49             /*字体加粗*/
50             font-weight: bold;
51         }
52     </style>
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         <li><a href="">首页</a></li>
62         <li><a href="">新闻</a></li>
63         <li><a href="">联系</a></li>
64         <li><a href="">关于</a></li>
65     </ul>
66 </body>
67 
68 </html>

 

posted @ 2017-08-27 17:53  我所向往的美好  阅读(4252)  评论(0)  编辑  收藏  举报