<style type="text/css">
html, body
{
margin: 0;
padding: 30px 10px;
text-align: center;
}
#outer
{
780px;
margin: auto;
text-align: left;
border: 1px solid #000;
}
#outer
{
overflow: hidden;
position: relative;
}
.navwrap
{
float: left;
position: relative;
left: 50%;
text-align: left;
margin-bottom: 2em;
}
.navwrap ul
{
list-style: none;
position: relative;
left: -50%;
margin: 0;
padding: 0;
}
.navwrap li
{
border: 1px solid #eff2df;
float: left;
margin: 0 10px 0 0;
background: #809900;
}
.navwrap li.last
{
margin-right: 0;
}
.navwrap li a
{
float: left;
border: 1px solid #4c7300;
position: relative;
left: -2px;
top: -2px;
background: #eff2df;
color: #4c7300;
text-decoration: none;
padding: 6px 10px;
font-weight: bold;
}
.navwrap li a:hover
{
background: #809900;
color: #fff;
}
p
{
clear: both;
padding: 10px;
}
h1
{
text-align: center;
margin: 1em 0;
}
.clearer
{
height: 1px;
overflow: hidden;
margin-top: -1px;
clear: both;
}
</style>
<body>
<div id="outer">
<h1>
Welcome To WebDm.cn</h1>
<div class="navwrap">
<ul>
<li><a href="/">Button 1</a></li>
<li><a href="/">Button 2's a WebDm.cn</a></li>
<li><a href="This" _mce_href="http://www.webdm.cn">This">http://www.webdm.cn">This is Button 3</a></li>
<li><a href="#">B 4</a></li>
<li><a href="/">jQuery Demos</a></li>
<li class="last"><a href="/">Ajax</a></li>
</ul>
</div>
<div class="clearer">
</div>
<!-- ie needs this clearer -->
<div class="navwrap">
<ul>
<li><a href="#">ASP Codes</a></li>
<li><a href="Hello" _mce_href="http://www.webdm.cn">Hello">http://www.webdm.cn">Hello World!</a></li>
<li class="last"><a href="/">WebDm.cn</a></li>
</ul>
</div>
<div class="clearer">
</div>
<!-- ie needs this clearer -->
</div>
</body>
代码来自：http://www.webdm.cn/webcode/2cf486f4-d179-420b-88ab-f6f33d37bf6e.html