html:
<!DOCTYPE html>
<html>
<head>
<title>特征布局4</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-14T02:01:59+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局4.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box0">
<span class="newsHead">新聞列表</span>
<div class="moreinfo"><a id="more" >更多>></a></div>
<ul>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
<li>
<img src="img/dot.gif" alt="">
<img src="img/webwxgetmsgimg" alt="">
<a class="newsItem" href="#">國(guó)足止步八強(qiáng)賽,張玉寧掩面而泣</a>
<span>2016-06-23</span>
</li>
</ul>
</div>
</body>
</html>
css:
*{
padding: 0px;
margin: 0px;
}
.box0{
margin: 100px auto;
width: 600px;
height: 290px;
border: 1px solid gray;
position: relative;
}
.newsHead{
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;
}
.newsItem{
display: inline-block;
list-style: none;
font: 14px 雅黑;
color: black;
}
a:hover, #more:hover{
color: red;
}
效果圖：
特征布局4.png
