新闻列表的制作
2018-09-13 本文已影响0人
心软脾气硬01
2018-09-13 21-56-48.jpg
做一个如图所示的新闻列表
首先需要先创建一个外部盒子
把下边内容部分做一个内部的盒子
不多说了，请接源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.outer{
height: 292px;
width: 602px;
margin: 100px auto;
border: 1px #000 solid;
}
.box{
height: 241px;
width: 560px;
border-top: 1px black solid;
margin: 0px auto;
}
.left {
display: inline-block;
margin: 20px;
font: bold 18px 微软雅黑;
color: #000;
width: 80px;
}
.outer>.left{
width: 80px;
/*border-bottom: #ff0f3f 2px solid;*/
}
.right{
display: block;
margin: 20px;
/*padding-top: 0px;*/
font: bold 18px 微软雅黑;
color: black;
float: right;
}
.right a{
text-decoration: none;
list-style: none;
font: bold 16px 微软雅黑;
color: #666666;
float: right;
top: 40px;
}
/*.box li{*/
/*list-style: none;*/
/*}*/
.box a{
display: block;
font: 14px 微软雅黑;
color: #000;
float: left;
margin: 9px;
text-decoration: none;
}
.box span{
float: right;
display: block;
}
.box1{
width: 80px;
height: 2px;
border-top: #ff0f3f 2px solid;
}
</style>
</head>
<body>
<div class="outer">
<span class="left">新闻列表</span>
<div class="right">
<a href="#">更多>></a>
</div>
<div class="box">
<!--<ul>-->
<div class="box1"></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">崔龙洙解苏宁因何打动他 要以学习的姿态去中超 <span>2016-06-23</span></a></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">崔龙洙首尔告别战率队2-1胜 赛后向球迷挥手作别 <span>2016-06-23</span></a></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">曝国安苏宁争抢比甲铜靴 意大利国脚身价650万欧 <span>2016-06-23</span></a></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">崔龙洙或将现场看苏宁战恒大 称被球队诚意打动 <span>2016-06-23</span></a></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">中超转会汇总（更新中）国内足球招实习兼职编辑 <span>2016-06-23</span></a></div>
<div><a href="#"><img src="dian.jpg" style="margin-bottom: 5px;margin-right: 10px;"><img src="icon.jpg" style="margin-right: 10px;">永昌官宣法国高中锋加盟 联赛28场15球曾战欧冠 <span>2016-06-23</span></a></div>
<!--</ul>-->
</div>
</div>
</body>
</html>
最后的效果图如下：
2018-09-13 22-25-28.jpg
