純CSS圓角導航菜單_菜單導航特效

純CSS圓角導航菜單,純CSS實現漂亮的圓角邊界菜單，超不錯的效果，沒有用到圖片，全部是CSS寫出來的，佩服作者的水平吧？

<!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" mrc="text/html; charset=gb2312" />
<title>純CSS實現漂亮的邊界菜單- www.zhaotila.cn</title>
<style type="text/css">
.outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}
.outer li {display:block; float:left;}
.outer {display:block; position:relative; background:#eee; padding:2em; margin:20px 15px;}
.xsnazzy {background:transparent;}
.xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
/*/*/
.xtop {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow: hidden; 
/*www.zhaotila.cn */ 
}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxmrc {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
/*www.zhaotila.cn */ 
a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
a.xmenu2:hover {background:transparent; cursor:pointer;}
a.xmenu2:hover span {color:#000;}/*www.zhaotila.cn */ 
a.xmenu2:hover .xboxmrc {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
a.xmenu2:hover .xb1 {background:#888;}
a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
.xboxmrcd {display:block; background:#cc6; border:0 solid #fff; border-width:1px 1px 0 1px; padding-top:5px;}
a.xmenu2:hover .xboxmrcd {background:#eee; border-color:#888; border-top:1px solid #eee;}

</style>
</head>
<body>

<div class="outer">
<ul>
<li>
<a class="xmenu2" href="/">
Paul Cezanne
</a>
</li>
<li>
<a class="xmenu2" href="/">
Henri mb5u.com
</a>
</li>
<li>
<a class="xmenu2" href="/">
William 中文社區
</a>
</li>
<li>
<a class="xmenu2" href="/">
John Constable
</a>
</li>
<li>
<a class="xmenu2" href="/">
Claude 模板無憂
</a>
</li>
</ul>
</div>

<div class="outer">
<ul>
<li>
<a class="xmenu2" href="/">
Paul Cezanne
</a>
</li>
<li>
<a class="xmenu2" href="/">
Henri Matisse
</a>
</li>
<li>
<a class="xmenu2" href="/jscss/">
William 網頁殊效
</a>
</li>
<li>
<a class="xmenu2" href="/">
John Constable
</a>
</li>
<li>
<a class="xmenu2" href="/">
Claude 最新下載
</a>
</li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2012-05-24

[收藏][報錯][返回列表]

相關菜單導航特效：

純CSS圓角導航菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些