效果:
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;
}