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

最新推荐文章于 2024-04-29 12:00:00 发布

iteye_11687

最新推荐文章于 2024-04-29 12:00:00 发布

阅读量243

点赞数

文章标签： xhtml

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

引用

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>DIV+CSS圆角效果演示</title>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

</head>

<body>

<div class=”bg_l”>

<div class=”bg_r”>

<div class=”nav”>

<ul>

<li><a href=”#”>HOME</a></li>

<li><a href=”#”>COMPANY</a></li>

<li><a href=”#”>TEAM</a></li>

<li><a href=”#”>PARTNERS</a></li>

<li><a href=”#”>PRODUCTS</a></li>

<li><a href=”#” class=”current”>CLIENTS</a></li>

<li class=”no_bg”><a href=”#”>CONTACT</a></li>

</ul>

</div>

<!–/nav–>

</div>

<!–/bg_r–>

</div>

<!–/bg_l–>

</body>

</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;}