这好像是从经典里面copy下来的。
css代码
body{ margin:0px; padding:0px; text-align:center; } #navigation { background:#99CCFF; width:715px; margin:30px auto; height:38px; /* hide overflow:hidden from IE5/Mac */ /* /*/ overflow: hidden; /* */ } #navigation ul { margin:0; padding:0; list-style-type:none; background:transparent; } #navigation li { display:block; float:left; margin:0 1px; } .snazzy { background:transparent; } .snazzy span { text-align:center; color:#fff; margin:0; font-weight:normal; } .b1, .b2, .b3, .b4 { display:block; font-size:1px; /* hide overflow:hidden from IE5/Mac */ /* /*/ overflow: hidden; /* */ } .b1, .b2, .b3 { height:1px; } .b2, .b3, .b4 { border-left:1px solid #fff; border-right:1px solid #fff; } .b1 { margin:0 5px; background:#fff; } .b2 { margin:0 3px; border-width:0 2px; } .b3 { margin:0 2px; } .b4 { height:2px; margin:0 1px; } .boxcontent { display:block; border-left:1px solid #fff; border-right:1px solid #fff; } a.menu, a.menu:visited { display:block; text-decoration:none; width:100px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } a.current span, a.current:visited span { padding-top:10px; } a.menu:hover { background:transparent; cursor:pointer; } a.current:hover { cursor:default; } a.menu:hover span { padding-top:10px; } .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} .lace {background:#e0e0d5;} .slate {background:#bcdae9;} .salmon {background:#ffa07a;} .mint {background:#f5fffa;} #back{ margin:100px auto; padding:0px; width:100px; background:#6cf; height:20px; overflow:hidden; } #back a:link,#back a:visited{ font-size:14px; color:red; text-decoration:none; } #back a:hover{ text-decoration:underline; }
html
<body> <div id="navigation"> <ul> <li><a class="menu" title="AccessKey: a" accessKey="a" href="#"><b class="snazzy"><span class="boxcontent red">Demos</span> <b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b></b></a></li> <li><a class="menu" title="AccessKey: b" accessKey="b" href="#"><b class="snazzy"><span class="boxcontent orange">Menus</span> <b class="b4 orange"></b><b class="b3 orange"></b><b class="b2 orange"></b><b class="b1"></b></b></a></li> <li><a class="menu current" title="AccessKey: c" accessKey="c" href="#"><b class=snazzy><span class="boxcontent yellow">Layouts</span> <b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b></b></a></li> <li><a class="menu" title="AccessKey: d" accessKey="d "href="#"><b class="snazzy"><span class="boxcontent green">Boxes</span> <b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b></b></a></li> <li><a class="menu" title="AccessKey: e" accessKey="e" href="#"><b class="snazzy"><span class="boxcontent blue">Mozilla</span> <b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class=b1></b></b></a></li> <li><a class="menu" title="AccessKey: f" accessKey="f" href="#"><b class="snazzy"><span class="boxcontent indigo">Explorer</span> <b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b></b></a></li> <li><a class="menu" title="AccessKey: g" accessKey="g" href="#"><b class="snazzy"><span class="boxcontent violet">Opacity</span> <b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b></b></a></li> </ul> </div>
效果如图,有兴趣的朋友还是把代码copy一下吧,这烂blog也太烂了,应该有运行代码的功能啊~~~~强烈建议增加此功能!!
原始的个站转移了