DIV+CSS圆角效果的简易实现[原创]

也许很多人还在为制作圆角导航而烦恼,因为在传统制作圆角效果时大多数人的思路是采用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

引用

DIV+CSS圆角效果演示

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:[email protected]

欢迎光顾我的博客:http://www.joychao.cc

所有代码及图片都打包好了,欢迎下载和学习。

源码及素材下载:

http://115.com/file/e6e6q6g8


你可能感兴趣的:(DIV+CSS圆角效果的简易实现[原创])