项目实战--PC端固态布局[5]之footer

效果：

index.html

</div>
<footer id="footer">

	<div class="top">
	    <div class="block left">
	    	<h2>合作伙伴</h2>
	    	<hr>
	    	<ul>
	    		<li>途牛旅游网</li>
	    		<li>驴妈妈旅游网</li>
	    		<li>携程旅行</li>
	    		<li>中国青年旅行社</li>
	    	</ul>
	    </div>
	    <div class="block center">
	    	<h2>旅游FAQ</h2>
	    	<hr>
	    	<ul>
	    		<li>旅游合同签订方式</li>
	    		<li>儿童价是基于什么制定的</li>
	    		<li>单房差是什么</li>
	    		<li>旅游保险有哪些种类</li>
	    	</ul>
	    </div>
	    <div class="block right">
	    	<h2>联系方式</h2>
	    	<hr>
	    	<ul>
	    		<li>微博：weibo.com</li>
	    		<li>邮件：ycku@ycku.com</li>
	    		<li>地址：河南省周口市郸城县振兴路</li>
	    	</ul>
	    </div>
	</div>
	<div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div>
</footer>

style.css:

#footer{
	height: 360px;
	background-color: #222;

}
/*版权区CSS*/
#footer .bottom{
	height: 80px;
	line-height: 80px;
	background-color: #000;
	text-align:center;
    color:#777;
    border-top:1px solid #444;
    text-align: center;
}
#footer .top{
	width: 1263px;
	height: 280px;
	/*background-color: red;*/
	margin:0 auto;
	text-align: center;
}

#footer .block{
	width: 410px;
	height: 280px;
	display: inline-block;
	text-align: left;
	color: #ccc;
	/*垂直居顶*/
	vertical-align: top;
}
#footer ul{
	font-size: 18px;
	color:#777;
	/*文本首行缩进*/
	text-indent:1px;
	line-height: 2; 
}
#footer h2{
	font-size: 24px;
	font-weight: normal;
	padding: 20px;
}
#footer hr{
	width: 99%;
	border:1px dashed #333;
}