<!DOCTYPE html>
<html>
<head>
<title>新闻列表01</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.box{
margin: 100px auto;
width: 600px;
height: 290px;
border: 1px solid gray;
position: relative;
}
.newsList{
display: inline-block;
width: 100px;
height: 50px;
margin-left: 20px;
text-align: center;
font: 18px 雅黑;
color: black;
line-height: 50px;
border-bottom: red 2px solid;
float: left;
}
.moreinfo{
display: inline-block;
width: 460px;
height: 50px;
margin-right: 20px;
text-align: right;
line-height: 50px;
border-bottom: gray 1px solid;
float: left;
}
ul{
display: block;
width: 560px;
height: 238px;
margin: 0px 20px;
position: absolute;
top: 52px;
}
li{
width: 100%;
height: 38px;
list-style: none;
line-height: 38px;
float: left;
border-bottom: 0.1px solid #eee;
}
img{
vertical-align: middle;
}
a{
text-decoration: none;
}
span{
float: right;
}
#more{
color: gray;
}
.newsInfo{
display: inline-block;
list-style: none;
font: 14px 雅黑;
color: black;
}
</style>
</head>
<body>
<div class="box">
<span class="newsList">新闻列表</span>
<div class="moreinfo"><a id="more" href="https://www.51test.com">更多>></a></div>
<ul>
<li>
<img src="img/dot.gif">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif">
<img src="img/icon.jpg">
<a class="newsInfo" href="#">国足止步八强赛,张玉宁掩面而泣</a>
<span>2016-06-23</span>
</li>
</ul>
</div>
</body>
</html>
新闻列表.jpg
