这好像是从经典里面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也太烂了，应该有运行代码的功能啊～～～～强烈建议增加此功能！！
原始的个站转移了
发表于 @ 2006年03月31日 23:30:00|评论(loading...)|编辑