转载：CSS圆角导航的两种不同构建方法

来源：互联网发布：数控加工编程编辑：程序博客网时间：2024/06/05 16:29

简单的两种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 40 </style>414243 <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; }可以看出代码明显少了。2.利用div设置与背景色相同的颜色来“欺骗”眼睛，做到圆角导航1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4<title>navigation</title> 5<style>... 666</style>67</head>6869<body>7071<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下运行正常。