CSS圆角导航的两种不同构建方法
由 Gary 发表于 六.27, 2008, 分类 CSS, 学习
简单的两种CSS圆角导航构建方法，简单，但是细节部分还是需要注意下。首先来看第一种：
1.利用背景图像构建
准备一张圆角图像，利用CSS定义背景图像，这是最简单的圆角导航。
我准备的图像为400px*40px,代码如下：
1 <HTML>
2 <HEAD>
3 <TITLE> Navigation </TITLE>
4 <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″></HEAD>
5 <style type=”text/css”>
6 <!–
7 * {
8 margin:0;
9 padding:0;
10 }
11 body {
12 font-family: 雅黑，Arial;
13 font-size:16px;
14 text-align:center;
15 }
16 a {
17 text-decoration:none;
18 }
19 .nav {
20 float:left;
21 width:400px;
22 height:40px;
23 background: url(http://www.cnblogs.com/images/cnblogs_com/slotbeta/nav.gif) no-repeat center;
24 }
25 .nav li {
26 float:left;
27 width:100px;
28 line-height:40px;
29 list-style:none;
30 }
31 .nav li a {
32 color:#222;
33 font-weight:bold;
34 display:block;
35 }
36 .current {
37 background:url(http://www.cnblogs.com/images/cnblogs_com/slotbeta/current.gif) no-repeat center;
38 }
39 –>
40 </style>
41
42
43 <BODY>
44 <div class=”nav”>
45 <ul>
46 <li><a href=”#” class=”current”>首页</a></li>
47 <li><a href=”#”>资讯</a></li>
48 <li><a href=”#”>人物</a></li>
49 <li><a href=”#”>互联网</a></li>
50 </ul>
51 </div>
52 </BODY>
53 </HTML>
这里需要注意的是代码*{margin:0;padding:0}，如果将该段代码注释掉，那么在IE下正常显示而在FF下出现错位情况；另外就是开始时候我的代码是这样的：
.nav li {
float:left;
list-style:none;
}
.nav li a {
float:left;
color:#222;
font-weight:bold;
display:block;
width:75px;
line-height:40px;
margin:0 0 0 25px;
}
后来改为
.nav li {
float:left;
width:100px;
line-height:40px;
list-style:none;
}
.nav li a {
color:#222;
font-weight:bold;
display:block;
}
可以看出代码明显少了。
CSS构建圆角导航方法二
2.利用div设置与背景色相同的颜色来“欺骗”眼睛，做到圆角导航
代码如下：
1 <html>
2 <head>
3 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
4 <title>navigation</title>
5 <style>
6 <!–
7 * {
8 margin:0;
9 padding:0;
10 }
11 body {
12 text-align:center;
13 font-size:16px;
14 }
15 .l{
16 float:left;
17 }
18 .r {
19 float:right;
20 }
21 .c {}{
22 clear:both;
23 }
24 .w {
25 width:4px;
26 height:1px;
27 background:#fff;
28 overflow:hidden;
29 }
30 .h {}{
31 width:2px;
32 height:1px;
33 background:#fff;
34 overflow:hidden;
35 }
36 .o {}{
37 width:1px;
38 height:2px;
39 background:#fff;
40 overflow:hidden;
41 }
42 .red {
43 background:#333;
44 width:400px;
45 height:48px;
46 margin:10px;
47 }
48 .nav {}{
49 float:left;
50 width:400px;
51 height:40px;
52 }
53 .nav li{
54 float:left;
55 width:100px;
56 line-height:40px;
57 list-style:none;
58 }
59 .nav li a {
60 color:#555;
61 display:block;
62 font-weight:bold;
63 text-decoration:none;
64 }
65 –>
66 </style>
67 </head>
68
69 <body>
70
71 <div class=”red”>
72 <div class=”l w”></div>
73 <div class=”r w”></div>
74 <div class=”c”></div>
75 <div class=”l h”></div>
76 <div class=”r h”></div>
77 <div class=”c”></div>
78 <div class=”l o”></div>
79 <div class=”r o”></div>
80 <div class=”c”></div>
81 <div class=”nav”>
82 <ul>
83 <li><a href=”#”>首页</a></li>
84 <li><a href=”#”>资讯</a></li>
85 <li><a href=”#”>人物</a></li>
86 <li><a href=”#”>互联网</a></li>
87 </ul>
88 </div>
89 <div class=”l o”></div>
90 <div class=”r o”></div>
91 <div class=”c”></div>
92 <div class=”l h”></div>
93 <div class=”r h”></div>
94 <div class=”c”></div>
95 <div class=”l w”></div>
96 <div class=”r w”></div>
97 </div>
98 </body>
99 </html>
这个方法最先出现在Google的网站导航页面（http://daohang.google.cn ），利用三个4*1px 、2*1px 、 1*2 px 大小的div，并设置相应背景色（这里设置的是白色），通过使用浮动来达到圆角的效果，其中最重要的就是给以上三个div设置overflow: hidden; 。这里只是班门弄斧的做出两个，如果大家有更好的方法，欢迎跟帖交流！
注：以上在IE6、7,FF2.0下运行正常。
十步杀一人，千里不留行；事了拂衣去，深藏功与名。
-
Hi~
欢迎翻阅负罪者！博客内容很复杂，有一些技术类的资料，更多的是吐槽...如果对你有所帮助那再好不过了。由于本博客某些图片链自Flickr，还麻烦各位同学自备翻墙梯子！诅咒变态的墙！
你可以用Email订阅我~
你曾对我说...
- 发表于 又又又一次坐错车……呃~~这个页面还有东西没有改...
- 发表于 又又又一次坐错车……@ 兰子 哈哈~我经常坐错...
- 发表于 又又又一次坐错车……你个傻X
- 发表于 《原谅》跟朋友，保持联系。约人吃个饭...
- 发表于 蟑螂，何止是“小”强很有见地~
- 发表于 我们是啊，美好的回忆让人感到幸福...
- 发表于 大家一起来翻墙还不错
- 发表于 我们勾起你的回忆了吧
- 发表于 大家一起来翻墙速度怎么样？
- 实在不好意思~答应作者不会将...
