<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#footer{
width: 100%;
/*height: 20%;*/
text-align: center;
background: #262524;
color: #fff;
padding: 1% 0 5% 0;
position: relative;
}
#footer .footerList a{
color: #fff;
}
#footer .footerList a:hover{
color: #207a16;
}
#footer .footerList li:nth-of-type(1) a{
color: #aaa;
font-size: 14pt;
line-height: 1.9;
font-weight: bold;
}
#footer .footerText{
width: 100%;
position: absolute;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
}
#footer .footerText p{
font-size: 7pt;
line-height: 0.7;
}
</style>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<footer id="footer">
<div class="container">
<ul class="footerList list-unstyled col-sm-3">
<li><a href="javascript:">产品家族</a></li>
<li><a href="javascript:">咖啡机</a></li>
<li><a href="javascript:">浓臻交响</a></li>
<li><a href="javascript:">即饮系列</a></li>
<li><a href="javascript:">礼盒系列</a></li>
<li><a href="javascript:">醇咖啡系列</a></li>
</ul>
<ul class="footerList list-unstyled col-sm-3">
<li><a href="javascript:">品牌介绍</a></li>
<li><a href="javascript:">品牌介绍</a></li>
<li><a href="javascript:">品牌文化</a></li>
<li><a href="javascript:">品牌视频</a></li>
<li><a href="javascript:">品牌历程</a></li>
</ul>
<ul class="footerList list-unstyled col-sm-3">
<li><a href="javascript:">产品介绍</a></li>
<li><a href="javascript:">当季新品</a></li>
<li><a href="javascript:">当季爆品</a></li>
<li><a href="javascript:">产品列表</a></li>
<li><a href="javascript:">最新活动</a></li>
</ul>
<ul class="footerList list-unstyled col-sm-3">
<li><a href="javascript:">会员活动</a></li>
<li><a href="javascript:">会员权益</a></li>
<li><a href="javascript:">会员节日</a></li>
<li><a href="javascript:">联系我们</a></li>
<li><a href="javascript:">网上留言</a></li>
</ul>
<div class="footerText col-sm-12">
<p>ALL RIGHTS RESERVED ?2017</p>
<p>xxxx资管理有限公司 版权所有</p>
<p>热线电话:000-000-0000 </p>
</div>
</div>
</footer>
</body>
</html>
原文：https://www.cnblogs.com/Lily984739707/p/9356904.html