<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条新闻</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.box{
width: 500px;
height: 500px;
border: 1px solid #fff;
margin: 0 auto;
}
.top{
width: 370px;
border-bottom: 3px solid#C2130E;
}
.top .n{
font-weight: bold;
background: #fff;
}
.top .i{
background: #C2130E; color: #EEBCBA;
}
.top ul li{
list-style-type: none;
float: left;
height: 22px;
line-height: 22px;
padding-left: 20px;
padding-right: 10px;
background: #ccc;
border-right:1px solid #fff;
text-align: left;
padding-left:20px;
text-align:center;
}
.clear{
clear: both;
}
.content {
font-size: 12px;
background: url(images/bg.gif)no-repeat;
margin: 10px;
height: 300px
}
.content ul li{
list-style-type: none;
margin-left: 25px;
height: 26px;
line-height: 14px;
color: #C3C3C3;
}
.m{
float: right;
color: #C3C3C3;
width: 150px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<ul>
<li class="n">新闻排行</li>
<li class="i">国内</li>
<li>国际</li>
<li>社会</li>
<li>网评</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<ul>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
<li>新闻排行新闻排行新闻排行新闻排行新闻排行新闻排行</li>
</ul>
<div class="clear"></div>
<div class="m">more</div>
</div>
</div>
</body>
</html>
