昨天下午实现了不用图片的圆角,今天发上来,大家分享分享。呵呵
以下分别是.html文件和.css文件,分别保存以后,放在同一个目录中,就可以看到效果了。
nav.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>导航</title>
<link href="nav.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
<br />
<div id="nav">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<div class="row5"></div>
<div class="navBody"></div>
<div class="row5"></div>
<div class="row4"></div>
<div class="row3"></div>
<div class="row2"></div>
<div class="row1"></div>
</div>
</body>
</html>
nav.css
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
#nav{
width:976px;
height:88px;
margin:0 auto;
font:14px Arial;
font-weight:bold;
}
#nav p {
padding:0 0 2px 0;
text-align:center;
background:#F9ECE3;
border:1px solid #E3D2C2;
border-top-width:0;
}
#nav div{
height:1px;
overflow:hidden;
background:#F9ECE3;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row1{
margin:0 5px;
background:#E3D2C2;
}
#nav .row2{
margin:0 3px;
border:0 2px;
border-top:0px ;
border-bottom:0px ;
border-left:2px solid #E3D2C2;
border-right:2px solid #E3D2C2;
}
#nav .row3{
margin:0 2px;
border-top-width:0px ;
border-bottom-width:0px ;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row4{
margin:0 1px;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .row5{
margin:0;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}
#nav .navBody{
width:975px;
height:80px;
background:#F9ECE3;
border-top-width:0px;
border-bottom-width:0px;
border-left:1px solid #E3D2C2;
border-right:1px solid #E3D2C2;
}