2018-09-13 21-56-48.jpg
做一個(gè)如圖所示的新聞列表
首先需要先創(chuàng)建一個(gè)外部盒子
把下邊內(nèi)容部分做一個(gè)內(nèi)部的盒子
不多說(shuō)了，請(qǐng)接源代碼：
<!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;">崔龍洙解蘇寧因何打動(dòng)他 要以學(xué)習(xí)的姿態(tài)去中超 <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;">崔龍洙首爾告別戰(zhàn)率隊(duì)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;">曝國(guó)安蘇寧爭(zhēng)搶比甲銅靴 意大利國(guó)腳身價(jià)650萬(wàn)歐 <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;">崔龍洙或?qū)F(xiàn)場(chǎng)看蘇寧戰(zhàn)恒大 稱(chēng)被球隊(duì)誠(chéng)意打動(dòng) <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;">中超轉(zhuǎn)會(huì)匯總（更新中）國(guó)內(nèi)足球招實(shí)習(xí)兼職編輯 <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;">永昌官宣法國(guó)高中鋒加盟 聯(lián)賽28場(chǎng)15球曾戰(zhàn)歐冠 <span>2016-06-23</span></a></div>
<!--</ul>-->
</div>
</div>
</body>
</html>
最后的效果圖如下：
2018-09-13 22-25-28.jpg
