1、我们咸犴孜稍先来写html内容，footer有2部分组成，上面部分是常用的链接内容，可以做友情链接，下面部分是网站的版权申明，代码如下： <div class="gcs-footer"> <div class="footer-top"> <a href="#">百度网</a> | <a href="#">新浪网</a> | <a href="#">腾迅房产</a> | <a href="#">找货网</a> | <a href="#">北极绒</a> | <a href="#">阿里巴巴</a> | </div> <p> ©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4 </p> </div>效果图如下：
2、我们设置padding为0，margin为0，这样就可以清除内外边距，否则宽度100%会出现水平滚动条。
3、接下来我们给footer区域加上高度为165px，宽度自适应，设置背景颜色，代码如下： .gcs-footer{ margin-top: 20px; background:#222c3a; width: 100%; height: 165px; text-align: center; color: white; position: absolute; }效果图如下：
4、下面给a标签加上样式，去掉text-docoration,设计文字颜色等，代码如下：.gcs-footer .footer-top{ margin-top: 50px; }.gcs-footer a{ color: #f0f1f1; text-decoration: none; padding: 0 10px; vertical-align:middle;}效果图如下：
5、下面给a加上鼠标经过效果，并设置p元素的css样式，代码如下：.gcs-footer a:hover{ color: red; text-decoration: underline;}.gcs-footer p{ height: 15px; color: #888888; margin-top: 30px;}效果图如下：
6、最后，请看完整的源代码如下：<挢旗扦渌;!DOCTYPE html><html> <head>艘早祓胂 <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }* .gcs-footer{ margin-top: 20px; background:#222c3a; width: 100%; height: 165px; text-align: center; color: white; position: absolute; }.gcs-footer .footer-top{ margin-top: 50px; }.gcs-footer a{ color: #f0f1f1; text-decoration: none; padding: 0 10px; vertical-align:middle;}.gcs-footer a:hover{ color: red; text-decoration: underline;}.gcs-footer p{ height: 15px; color: #888888; margin-top: 30px;} </style> </head> <body> <div class="gcs-footer"> <div class="footer-top"> <a href="#">百度网</a> | <a href="#">新浪网</a> | <a href="#">腾迅房产</a> | <a href="#">找货网</a> | <a href="#">北极绒</a> | <a href="#">阿里巴巴</a> | </div> <p> ©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4 </p> </div> </body></html>