- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style type="text/css">
.total{
width: 602px;
height: 292px;
border:1px solid #d1d1d1;
margin:50px auto;
position:relative;
}
p{
padding-left:20px;
font-color:#000 ;
font-family: '微软雅黑'；
font-size:18px;
border-bottom: 2px solid red;
display: inline-block;
margin:0px 0px;
position: absolute;
top:28px;
}
.list_box1{
width: 580px;
height: 40px;
margin-top:50px;
margin-left: 10px;
margin-right: 10px;
border-top:2px solid #d1d1d1;
border-bottom:1px solid #d1d1d1;
vertical-align: center;
clear :top;
}
.list_box2{
width: 580px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
border-bottom:1px solid #d1d1d1;
vertical-align: center;
}
.list_box3{
width: 580px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
border-bottom:1px solid #d1d1d1;
vertical-align: center;
}
.list_box4{
width: 580px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
border-bottom:1px solid #d1d1d1;
vertical-align: center;
}
.list_box5{
width: 580px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
border-bottom:1px solid #d1d1d1;
vertical-align: center;
}
.list_box6{
width: 580px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
vertical-align: center;
}
span{display:block;
float:right;
vertical-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="total">
<p>新闻列表</p>
<div class="list_box1 .clearfix">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
<div class="list_box2">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
<div class="list_box3">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
<div class="list_box4">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
<div class="list_box5">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
<div class="list_box6">
<img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
<span>2016-06-23</span>
</div>
</body>
</html>
-
效果图
Image 2.png
