代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css" >
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
width: 510px;
overflow: hidden;
}
li {
float: left;
width: 100px;
height: 40px;
background: pink;
text-align: center;
cursor: pointer;
font: 400 18px/40px "SimSun";
}
span {
display: none;
width: 500px;
height: 360px;
font: 700 100px/360px "consolas";
text-align: center;
background: yellow;
}
.box {
width: 500px;
height:400px;
margin: 100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.current {
background: red;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>公告</li>
<li class="current">规则</li>
<li>规则</li>
<li>公告</li>
<li>公告</li>
</ul>
<span>鞋子</span>
<span class="show">鞋子</span>
<span>鞋子</span>
<span>鞋子</span>
<span>鞋子</span>
</div>
</body>
</html>