代码简介:
纯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> <title>纯CSS打造漂亮的圆角边界导航_网页代码站(www.webdm.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; } .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-0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-0 1px 1px 1px;} a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; 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;} .xboxcontentd {display:block; background:#cc6; border:0 solid #fff; border-1px 1px 0 1px; padding-top:5px;} a.xmenu2:hover .xboxcontentd {background:#eee; border-color:#888; border-top:1px solid #eee;} </style> </head> <body> <div class="outer"> <ul> <li> <a class="xmenu2" href="/"><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"> Paul<br />Cezanne</span> </b></a> </li> <li> <a class="xmenu2" href="/"><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 />WebDm.cn</span> </b></a> </li> <li> <a class="xmenu2" href="/"><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 />中文社区</span> </b></a> </li> <li> <a class="xmenu2" href="/"><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="http://www.webdm.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"> Claude<br />网页代码站</span> </b></a> </li> </ul> </div> <div class="outer"> <ul> <li> <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd"> Paul<br />Cezanne</span> </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a> </li> <li> <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd"> Henri<br />Matisse</span> </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a> </li> <li> <a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd"> William<br />网页特效</span> </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a> </li> <li> <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd"> John<br />Constable</span> </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a> </li> <li> <a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd"> Claude<br />最新下载</span> </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a> </li> </ul> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/2d5964ae-4470-466f-b0ce-d7df47e16490.html