导航

水平导航栏的设置

  • display：inline

　　不能设置导航项的宽度　　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 ul
 6 {
 7 list-style-type:none;
 8 margin:0;
 9 padding:0;
10 padding-top:6px;
11 padding-bottom:6px;
12 }
13 li
14 {
15 display:inline;
16 }
17 a:link,a:visited
18 {
19 font-weight:bold;
20 color:#FFFFFF;
21 background-color:#98bf21;
22 text-align:center;
23 padding:6px;
24 text-decoration:none;
25 text-transform:uppercase;
26 }
27 a:hover,a:active
28 {
29 background-color:#7A991A;
30 }
31 
32 </style>
33 </head>
34 
35 <body>
36 <ul>
37 <li><a href="#home">Home</a></li>
38 <li><a href="#news">News</a></li>
39 <li><a href="#contact">Contact</a></li>
40 <li><a href="#about">About</a></li>
41 </ul>
42 </body>
43 </html>
44 
45

  • Float：left

　　可以设置导航项的宽度

　　

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:3px;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
    a{display:block;
width:120px;
    }
    
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

posted on 2015-12-02 16:16  wjw413c  阅读(135)  评论(0)  编辑  收藏  举报

导航