使用方法：

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css" />

2、body引入HTML代碼

<div class="info-container">
   <div class="info-container-title">
	   <h2>新聞資訊</h2>
   </div>
   <div class="info-container-list clearfix">
	   <div class="info-listItem">
		   <div class="info-listItem-title">知識(shí)堂</div>
		   <dl class="info-listItem-list">
			   <dt>
				   <a href="#">
					   <img src="images/news-001.png" alt="">
					   <span>模板合集版下載 最新版本</span>
				   </a>
			   </dt>
			   <dd><a href="#">【使用教程】商品類型屬性設(shè)置簡(jiǎn)述</a></dd>
			   <dd><a href="#">【使用教程】添加商品之地區(qū)模式</a></dd>
			   <dd><a href="#">【微信被劫持顯示】空白頁(yè)面解決方法</a></dd>
		   </dl>
		   <a href="#" class="info-more">查看更多</a>
	   </div>
	   <div class="info-listItem">
		   <div class="info-listItem-title">資訊堂</div>
		   <dl class="info-listItem-list">
			   <dt>
				   <a href="#">
					   <img src="images/news-002.png" alt="">
					   <span>騰訊致謝360發(fā)現(xiàn)漏洞</span>
				   </a>
			   </dt>
			   <dd><a href="#">OPPO與支付寶合作，開啟3D人臉支付技術(shù)！</a></dd>
			   <dd><a href="#">對(duì)比小米8SE，“嚇人的技術(shù)”榮耀play要涼了？</a></dd>
			   <dd><a href="#">阿里京東掀起“無(wú)人物流”電商大戰(zhàn)！</a></dd>
		   </dl>
		   <a href="#" class="info-more">查看更多</a>
	   </div>
	   <div class="info-listItem">
		   <div class="info-listItem-title">快報(bào)堂</div>
		   <dl class="info-listItem-list">
			   <dt>
				   <a href="#">
					   <img src="images/news-003.png" alt="">
					   <span>CEO仲華俊做客第一財(cái)經(jīng)《金融譯時(shí)代》，暢談未來(lái)新零售時(shí)代！</span>
				   </a>
			   </dt>
			   <dd><a href="#">多用戶商城系統(tǒng)版本升級(jí)2.6.2版正式發(fā)布</a></dd>
			   <dd><a href="#">多用戶商城系統(tǒng)版本升級(jí)2.6版正式發(fā)布</a></dd>
			   <dd><a href="#">多用戶商城系統(tǒng)版本升級(jí)2.6</a></dd>
		   </dl>
		   <a href="#" class="info-more">查看更多</a>
	   </div>
   </div>
</div>