分类： IT职场
2011-12-06 13:05:49
也许很多人还在为制作圆角导航而烦恼，因为在传统制作圆角效果时大多数人的思路是采用3个DIV加上浮动来实现，这样制作时很多情况会出现兼容性问题。下面我给大家分享一种较为简便的方法轻松实现圆角效果。
我们以下图为例：
首先说明一下整个思路的结构：
我们采用3层DIV嵌套的方式，外两层是背景层，一层背景是左边圆角，二层是右边圆角，三层是导航菜单容器。整个结构图如下：
然后我们把素材图切片做好，这里需要注意的是，坐圆角肯右圆角尺寸必须一样，方法是把左圆角水平反转后存为右圆角即可。把切好的图片放在img文件夹下
左圆角： 右圆角：导航栏背景：然后把bg_l这个DIV加上左圆角背景bg_l,jpg，背景位置是left center（左对齐，上下居中）;
把bg_r这个DIV加上右圆角背景bg_r.jpg，背景位置是right center（左对齐，上下居中）;
把nav这个DIV加上导航栏背景bg_nav.jpg，背景位置是right center（左对齐，上下居中）;
现在的效果如下：
正面拆分效果
面拆分效果图
下面我们开始用代码实现：
我们把CSS代码保存在css文件夹下，图片放在img文件夹下。
第一步：html代码
建立index.html 建立3个div： bg_l、bg_r、nav，嵌套结构如下：
这里的嵌套结构一定要按照顺序嵌套，另外也可以用id来给DIV命名。
第二步：CSS代码
建立CSS文件style.css，保存在css文件夹下。
写CSS代码之前首先去掉浏览器默认的CSS属性：body,div,a,ul,li{margin:0,padding:0}这里因为我们只会用到这些标签，所以就省去了其它的。
这里分享一下平常最常用的一段去除默认属性的代码：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,textarea,a{margin:0;padding:0;border:0;}
然后去掉ul的默认符号:ul{list_style:none;}
接下来设置DIV:bg_l的属性，高为55，宽为960px，左右居中,加上左圆角背景bg_l.jpg，不重复，左对齐，上下居中对齐，加上黑色背景#1a1a1a：
.bg_l{ width:960px; height:55px; margin:0 auto; background:#1a1a1a url(‘../img/bg_l.jpg’) left center no-repeat;}
效果如下：
然后设置bg_r的属性，宽度可以省略，因为DIV 默认会尽可能宽，父级DIV：bg_l已经定义了宽度960px，所以它会继承父级的宽度。背景色不能加，否则会覆盖掉bg_l层的左圆角背景，加上右圆角背景右对齐，上下居中对齐即可。
.bg_r{height:55px; background: url(../img/bg_r.jpg) right center no-repeat;}
现在的效果如下：
接下来要给DIV层nav加上属性，这里需要注意的是：nav的宽度不能为100%，因为它需要把左圆角和右圆角的位置流出来，两个圆角图片的宽度为 19px，所以给nav加上左右都为19像素的边距：margin:0 19px;加背景图片bg_nav.jpg，上下居中对齐，横向重复即可。
Nav的CSS代码如下：
效果如下：
这里把body也加上黑色#1a1a1a方便查看效果：
第三步：加上链接
加上ul列表的超链接菜单，这样一个圆角导航就完成了，接下来我们把导航链接加上后的效果：
OK，完毕,是不是感觉很简单？简短的几句代码，连float都没有用上只用了3个DIV轻松实现。
代码：
Index.html
引用
Style.css:
引用body,ul,li,div,a{margin:0;padding:0;border:0;}ul{ list-style:none;}
body{ background:#1a1a1a; font-family:Arial, Helvetica, sans-serif;}
.bg_l{width:960px; height:55px; margin:0 auto; background:#1a1a1a url(../img/bg_l.jpg) left center no-repeat;margin-top:30px;}
.bg_r{height:55px; background:url(../img/bg_r.jpg) right center no-repeat;}
.nav{ margin:0 19px; height:100%; background:url(../img/bg_nav.jpg) center center repeat-x;}
.nav ul li{ float:left; background:url(../img/bg_li.jpg) right center no-repeat;}
.nav ul li.no_bg{ background:none;}
.nav ul li a{ display:inline-block; width:113px; height:55px; line-height:55px; font-size:12px; font-weight:bold; text-align:center; text-decoration:none; color:#444;}
.nav ul li a:hover,.nav ul li a.current{ color:#b00000; background:url(../img/bg_a_current.jpg) center center no-repeat;}
教程到这里结束了，各位有问题可以联系本人：QQ:44294631 Email：
欢迎光顾我的博客：
所有代码及图片都打包好了，欢迎下载和学习。
源码及素材下载: