css制作简单的网页底部footer
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>
©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4
</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>
©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4
</div>
</body>
</html>