實(shí)現(xiàn)的效果如下:
圖片發(fā)自簡(jiǎn)書(shū)App
代碼如下:
<!DOCTYPE html>
<html>
<head> <meta charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
#box-1{ width:511px;height:342px;padding:0px 22px 4px 23px;border:solid 1px #000000;}
#title-1{font-weight:bold;font-size:26px;line-height:44px;font-family: 宋體; }
#title-2{font-weight:bold;font-size:20px;line-height:54px;font-family: 宋體; }
#content-1{height:80px;border-bottom:dashed #000000 1px;font-size:14px;line-height:26px;font-family: 宋體; text-indent:2em;color:#9b9b9b;}
#content-2-1{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 35px no-repeat;height:18px;text-indent:16px;padding-top:29px;font:bold 18px "宋體" ;letter-spacing:0px;color:#404646;}
#content-2-2{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋體" ;letter-spacing:0px;color:#404646;}
#content-2-3{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋體" ;letter-spacing:0px;color:#404646;}
#content-2-4{background:url(%E7%AC%AC%E4%BA%8C%E6%AC%A1%E4%BD%9C%E4%B8%9A-2-1.gif) 0px 25px no-repeat;height:18px;text-indent:16px;padding-top:19px;font:bold 18px "宋體" ;letter-spacing:0px;color:#404646;}
</style>
</head>
<body>
<div id="box-1">
<div id="title-1"> 動(dòng)態(tài)新聞</div>
<div id="title-2">掌握一門(mén)技術(shù)的重要性 </div>
<div id="content-1">掌握一門(mén)技術(shù)是未來(lái)生存的一塊敲門(mén)磚趴乡，掌握一門(mén)技術(shù)是未來(lái)生存的一塊敲門(mén)磚莲趣，掌握一門(mén)技術(shù)是未來(lái)生存的一塊敲門(mén)磚<br/> </div>
<div id="content-2-1">走進(jìn)民企觀摩學(xué)習(xí)與民企面對(duì)面</div>
<div id="content-2-2">走進(jìn)民企觀摩學(xué)習(xí)與民企面對(duì)面</div>
<div id="content-2-3">走進(jìn)民企觀摩學(xué)習(xí)與民企面對(duì)面</div>
<div id="content-2-4">走進(jìn)民企觀摩學(xué)習(xí)與民企面對(duì)面</div>
</div>
</body>
</html>
