html实现footer,并且包含响应式布局
时间: 2024-02-24 17:53:47 浏览: 25
实现一个包含响应式布局的 footer,可以使用以下 HTML 和 CSS 代码:
HTML代码:
```
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h4>联系我们</h4>
<p>地址:xxx</p>
<p>电话:xxx</p>
<p>邮箱:xxx</p>
</div>
<div class="col-md-4">
<h4>关于我们</h4>
<p>我们是xxx</p>
<p>我们做xxx</p>
</div>
<div class="col-md-4">
<h4>关注我们</h4>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
```
CSS代码:
```
footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
padding: 30px 0;
}
footer .container {
max-width: 1000px;
margin: 0 auto;
}
footer h4 {
margin-bottom: 20px;
font-weight: bold;
}
footer p {
margin-bottom: 10px;
font-size: 14px;
}
footer ul.social-icons {
list-style: none;
padding: 0;
margin: 0;
}
footer ul.social-icons li {
display: inline-block;
margin-right: 10px;
}
footer ul.social-icons li a {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #fff;
}
footer ul.social-icons li a i {
font-size: 20px;
}
@media (max-width: 768px) {
footer .col-md-4 {
margin-bottom: 30px;
}
footer ul.social-icons {
text-align: center;
}
footer ul.social-icons li {
display: block;
margin: 0 auto 10px;
}
footer ul.social-icons li:last-child {
margin-bottom: 0;
}
}
```
这段代码中,我们使用了 Bootstrap 框架的栅格系统来实现响应式布局。在屏幕宽度小于 768px 的时候,我们将三个列(col-md-4)改为堆叠在一起,并且将社交图标居中显示。