您的位置：首页 > 其它

实现了不用图片的圆角

2010-04-16 15:55 253 查看

昨天下午实现了不用图片的圆角，今天发上来，大家分享分享。呵呵

以下分别是.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;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航