CSS实现圆角菜单(不用图片)

时间:2015/12/1 11:24:00来源:互联网 作者:flyso 点击: 890 次
 <title>www.flyso.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是外面灰色的div部分,可以改成别的颜色*/
#outer {display:block; position:relative; background:#eee; padding:2em;}
/*菜单顶上部分区域框定(放置圆角)*/
.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;}
/*圆角效果,每两个class出一个角,再下面的是hover的改变效果*/
.xb1, .xb2, .xb3, .xb4 {
display:block;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.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;}
/*菜单内容*/
.xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
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;}
a.xmenu2:hover .xboxcontent {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;}
</style>
<div id="outer">
<ul>
<li>
<a class="xmenu2" href="http://www.flyso.cn"><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">
FLYSO<br />80NT</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="#nogo"><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">
Henri<br />Matisse</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="#nogo"><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">
William<br />Turner</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="#nogo"><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">
John<br />Constable</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="#nogo"><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">
Claude<br />Monet</span>
</b></a>
</li>
</ul>
</div>


Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3