用CSS做圆角的导航菜单
时间：[2006-11-21 15:35:10] 作者：作者不详
<!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=gb2312" />
<title>cssmu</title>
<style type="text/css">
body {
font-size:10pt;
}
#mucss {
background:#f6f6f6;
width:100%;
height:100px;
padding:0px;
}
#mucss ul {
list-style-type:none;
}
#mucss li {
float:left;
display:block;
margin:0px;
text-align:center;
}
.xsnazzy {
background:none transparent scroll repeat 0% 0%;
}
.xsnazzy span {
font-weight: normal;
padding:5px 0 0 0;
margin: 0px;
color: #fff;
text-align: center;
}
.xtop {
display: block;
font-size: 1px;
background: none transparent scroll repeat 0% 0% ;
}
.xb1,.xb2,.xb3,.xb4 {
display: block;
overflow: hidden;
}
.xb1,.xb2,.xb3 {
height: 1px;
}
.xb2,.xb3,.xb4{
border-right: #fff 1px solid;
border-left: #fff 1px solid;
background: #dd7;
}
.xb1 {
background: #fff;
margin: 0px 5px;
}
.xb2 {
border:0 2px 0 2px;
margin: 0px 3px;
}
.xb3 {
margin: 0px 2px;
}
.xb4 {
margin: 0px 1px;
height: 2px;
}
.xboxcontent {
border-right:#fff 1px solid;
border-top: #fff 0px solid;
border-left: #fff 1px solid;
border-bottom: #fff 1px solid;
display: block;
background: #cc6;
}
a.xmenu2 {
display: block;
width:50px;
text-decoration: none;
}
a.xmenu2:visited {
display:block;
width:50px;
text-decoration: none
}
a.xmenu2:hover {
background:none transparent scroll repeat 0% 0%;
cursor: pointer;
}
a.xmenu2:hover span {
color: #000;
}
a.xmenu2:hover .xboxcontent {
border-left-color: #888;
background: #eee;
border-top-color: #888;
border-bottom: #eee 1px solid;
border-right-color: #888;
}
a.xmenu2:hover .xb1 {
background: #888;
}
a.xmenu2:hover .xb2 {
border-left-color:#888;
background:#fff;
border-bottom-color:#888;
border-top-color:#888;
border-right-color:#888;
}
a.xmenu2:hover .xb3 {
border-left-color:#888;
border-bottom-color:#888;
border-top-color:#888;
border-right-color:#888;
background:#fff;
}
a.xmenu2:hover .xb4 {
border-left-color:#888;
background:#fff;
border-bottom-color:#888;
border-top-color:#888;
border-right-color:#888;
}
</style>
</head>
<body>
<div id="mucss">
<ul>
<li><a class=xmenu2 href="#a1">
<b class=xsnazzy>
<b class=xtop>
<b class=xb1></b>
<b class=xb2></b>
<b class=xb3></b>
<b class=xb4></b>
</b>
<span class=xboxcontent>导航一</span>
</b>
</a>
</li>
<li><a class=xmenu2 href="#a2">
<b class=xsnazzy>
<b class=xtop>
<b class=xb1></b>
<b class=xb2></b>
<b class=xb3></b>
<b class=xb4></b>
</b>
<span class=xboxcontent>导航二</span>
</b>
</a>
</li>
<li><a class=xmenu2 href="#a3">
<b class=xsnazzy>
<b class=xtop>
<b class=xb1></b>
<b class=xb2></b>
<b class=xb3></b>
<b class=xb4></b>
</b>
<span class=xboxcontent>导航三</span>
</b>
</a>
</li>
<li><a class=xmenu2 href="#a4">
<b class=xsnazzy>
<b class=xtop>
<b class=xb1></b>
<b class=xb2></b>
<b class=xb3></b>
<b class=xb4></b>
</b>
<span class=xboxcontent>导航四</span>
</b>
</a>
</li>
</ul>
</div>
</body>
</html>
【声明】本站刊载的《用CSS做圆角的导航菜单》一文如果有侵害你权益的情况，请联系我们。我们将及时采取措施。
QQ：44637339 Email:just6@163.com Tel:13355163107 Lining studios
