代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 560px;
height: 290px;
margin: 50px auto;
border: 1px solid #d8d8d8;
padding: 0px 20px;
}
.box1{
height: 49px;
border-bottom: 1px solid #d8d8d8;
}
ul{
list-style-type:none;
}
li{
height: 19px;
border-bottom: 0.5px solid #fafafa;
padding: 10px 0px;
}
.left,.date{
font:14px "微软雅黑";
color: #000;
text-decoration: none;
font-weight: bold;
}
.fuhao{
margin: 9px 0;
padding: 0px 8px 0px 0px;
float: left;
}
.fuhao2{
padding: 2px 0;
margin: 0px 2px;
float: left;
}
.left,.list{
float: left;
}
.date,.more{
float: right;
}
.more{
width: 60px;
padding: 13px 0px;
}
.list{
width: 85px;
padding: 12px 20px;
font:18px "微软雅黑";
font-weight: bold;
border-bottom: 2px solid red;
}
.more2{
text-decoration: none;
font:16px "微软雅黑";
color: #9c9c9c;
}
a:hover{
opacity: 0.3;
}
</style>;
</head>
<body>
<div class="box">
<div class="box1">
<p class="more"><a class="more2" href="#">更多>></a></p>
<p class="list"> 新闻列表 </p>
</div>
<div class="box2">
<ul>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">唐家三少相伴20年妻子去世 他们的故事看哭很多人</a>
<a class="date" href="">2016-06-23</a>
</li>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">审讯中突然地震 嫌犯：哥快给我把手铐解开一起跑</a>
<a class="date" href="">2016-06-23</a>
</li>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">被“台独”热炒的“台湾国护照” 在日本碰壁(图)</a>
<a class="date" href="">2016-06-23</a>
</li>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">四川广安女副区长被男友施暴致死 几度想分手未果</a>
<a class="date" href="">2016-06-23</a>
</li>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">《新浪会客厅》:碰上骗钱骗情的PUA 我能告他吗</a>
<a class="date" href="">2016-06-23</a>
</li>
<li>
<p><img class="fuhao" src="img/dot.gif" alt="符号"><img class="fuhao2" src="img/icon.jpg" alt="符号"></p>
<a class="left" href="">《新浪会客厅》:碰上骗钱骗情的PUA 我能告他吗</a>
<a class="date" href="">2016-06-23</a>
</li>
</ul>
</div>
</div>
</body>
</html>
效果如下：
新闻列表(1).png
