也许很多人还在为制作圆角导航而烦恼,因为在传统制作圆角效果时大多数人的思路是采用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,h
1
,h
2
,h
3
,h
4
,h
5
,h
6
,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"
>
<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
;}
|
教程到这里结束了,各位有问题可以联系本人:QQ:44294631 Email:joy#joychao.cc
欢迎光顾我的博客:http://www.joychao.cc
所有代码及图片都打包好了,欢迎下载和学习。
代码及图片压缩包: