div css網(wǎng)頁(yè)底部文字列表布局代碼

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="footer-box">
	<div class="footer-container">
		<div class="footer-service clearfix">
			<div class="footer-service-item footer-icon-001">
				<i></i>
				<span>專注服務(wù)于電商領(lǐng)域</span>
			</div>
			<div class="footer-service-item footer-icon-002">
				<i></i>
				<span>資深電商客服專家</span>
			</div>
			<div class="footer-service-item footer-icon-003">
				<i></i>
				<span>一對(duì)一專屬會(huì)員經(jīng)理</span>
			</div>
			<div class="footer-service-item footer-icon-004">
				<i></i>
				<span>385萬(wàn)用戶誠(chéng)意推薦</span>
			</div>
		</div>
		<div class="footer-line"></div>
		<div class="footer-links clearfix">
			<dl class="footer-article-item">
				<dt>旗下品牌</dt>
				<dd>
					<a href="#">17</a>
				</dd>
				<dd>
					<a href="#">ECJia</a>
				</dd>
				<dd>
					<a href="#">ECTouch</a>
				</dd>
			</dl>
			<dl class="footer-article-item">
				<dt>關(guān)于我們</dt>
				<dd>
					<a href="#">公司介紹</a>
				</dd>
				<dd>
					<a href="#">發(fā)展歷程</a>
				</dd>
				<dd>
					<a href="#">團(tuán)隊(duì)風(fēng)采</a>
				</dd>
				<dd>
					<a href="#">辦公環(huán)境</a>
				</dd>
				<dd>
					<a href="#">榮譽(yù)資質(zhì)</a>
				</dd>
				<dd>
					<a href="#">聯(lián)系我們</a>
				</dd>
			</dl>
			<dl class="footer-article-item">
				<dt>精品教程</dt>
				<dd>
					<a href="#">模板說(shuō)明</a>
				</dd>
				<dd>
					<a href="#">17教程</a>
				</dd>
				<dd>
					<a href="#">微商城教程</a>
				</dd>
				<dd>
					<a href="#">APP教程</a>
				</dd>
				<dd>
					<a href="#">視頻指導(dǎo)</a>
				</dd>
				<dd>
					<a href="#">問(wèn)答堂</a>
				</dd>
			</dl>
			<dl class="footer-article-item">
				<dt>其他</dt>
				<dd>
					<a href="#">官方論壇</a>
				</dd>
				<dd>
					<a href="#">服務(wù)支持</a>
				</dd>
				<dd>
					<a href="#">電商大會(huì)</a>
				</dd>
				<dd>
					<a href="#">投訴建議</a>
				</dd>
				<dd>
					<a href="#">支付方式</a>
				</dd>
				<dd>
					<a href="#">站點(diǎn)地圖</a>
				</dd>
			</dl>
			<dl class="footer-contact-item">
				<h3>聯(lián)系我們</h3>
				<p>400-010-xxx</p>
				<div class="footer-ewm">
					<img src="images/code.jpg" alt="">
					<p>關(guān)注微信訂閱號(hào)</p>
				</div>
			</dl>
		</div>
		<div class="footer-friend">
			<div class="footer-friend-title">友情鏈接：</div>
			<ul class="footer-friend-title-list clearfix">
				<li>
					<a href="#">模板素材網(wǎng)</a>
				</li>
				<li>
					<a href="#">移動(dòng)商城購(gòu)物</a>
				</li>
				<li>
					<a href="#">APP商城開(kāi)發(fā)</a>
				</li>
				<li>
					<a href="#">DESTOON B2B</a>
				</li>
				<li>
					<a href="#">Linux  </a>
				</li>
				<li>
					<a href="#">Linux 面板</a>
				</li>
				<li>
					<a href="#">Chrome插件</a>
				</li>
				<li>
					<a href="#">W3Cschool</a>
				</li>
				<li>
					<a href="#">網(wǎng)站模板</a>
				</li>
				<li>
					<a href="#">站長(zhǎng)工具</a>
				</li>
			</ul>
			<a href="#" class="footer-friend-more">更多 >></a>
		</div>
		<div class="footer-copyright">
			<p>? 2002-2018 素材網(wǎng)(17sucai.com) 版權(quán)所有，并保留所有權(quán)利   常年法律顧問(wèn): （天津）律師事務(wù)所</p>
			<p>
				天津市南開(kāi)二緯路xxxx號(hào)勸業(yè)場(chǎng)      
				<a href="#">
					<img src="images/icon-footer.png" alt="">津公網(wǎng)安備 00046899999xxxx號(hào)
				</a>
			</p>
		</div>
	</div>
</div>