<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试</title>
<style type="text/css">
/*清除内外间距*/
*{margin: 0;padding: 0;}
/*给body添加样式*/
body{font-size: 13px;color: #ccc;}
/*对a标签进行美化*/
a:link,a:visited{
text-decoration: none;
color: #ccc;
}
a:hover{
color: #f00;
}
/*去除ul小黑点*/
ul li{
list-style: none;
}
/*清除浮动*/
.clear{
clear: both;
}
.box{
width: 350px;
margin:0 auto;
}
.header{
width: 350px;
border-bottom: 3px solid #BE0000;
margin-bottom: 5px;
}
.header h4{
float: left;
color: black;
height: 16px;
line-height: 16px;
padding: 5px 0 0 20px;
}
.header div{
padding-left:100px;
}
.header div a{
float: left;
display: block;
height: 20px;
line-height: 20px;
border-right:1px solid #fff;
padding:0 15px;
color: #1F1F1F;
background-color: #DCDCDC;
}
#red{
background-color: #C2130E;
}
.content ul{
margin-left: 8px;
background: url(bg.gif) no-repeat left center;
}
.content ul li{
padding-left: 24px;
height: 26px;
line-height: 26px;
}
.more1{
text-align: right;
padding-bottom: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<h4>新闻排行</h4>
<div>
<a href="#" id="red">国内</a>
<a href="#">国际</a>
<a href="#">社会</a>
<a href="#">网屏</a>
</div>
<div class="clear"></div>
</div>
<div class="content">
<ul>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
<li><a href="#">与房价滞涨滞涨相伴相伴的是房地产企业高歌猛进</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑滞涨相</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑滞涨相</a></li>
<li><a href="#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
</ul>
</div>
<div class="more1">...more</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/a2222/p/6132165.html