写一个美团企业官网的页脚,带css,带注释
时间: 2024-04-01 21:35:29 浏览: 20
好的,以下是一个简单的美团企业官网的页脚,带有CSS和注释:
HTML代码:
```
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h5>联系我们</h5>
<ul class="list-unstyled">
<li>客服电话:400-850-8888</li>
<li>客服邮箱:kefu@meituan.com</li>
<li>地址:北京市海淀区中关村东路1号</li>
</ul>
</div>
<div class="col-sm-6 col-md-4">
<h5>关于美团</h5>
<ul class="list-unstyled">
<li><a href="#">关于我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">商户合作</a></li>
<li><a href="#">投资者关系</a></li>
</ul>
</div>
<div class="col-sm-12 col-md-4">
<h5>关注我们</h5>
<ul class="list-unstyled list-inline">
<li><a href="#"><i class="fa fa-qq"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
<li><a href="#"><i class="fa fa-wechat"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
```
CSS代码:
```
/* 给页脚添加底部边框 */
footer {
border-top: 1px solid #ccc;
padding: 30px 0;
}
/* 链接样式 */
footer a {
color: #666;
}
footer a:hover {
color: #333;
}
/* 列表样式 */
footer ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 没有下划线的链接 */
footer ul li a {
text-decoration: none;
}
/* 列表项之间的间距 */
footer ul li {
margin-bottom: 10px;
}
/* 列表项图标 */
footer ul li a i {
font-size: 1.5em;
margin-right: 10px;
}
/* 响应式样式 */
@media (max-width: 767px) {
footer ul.list-inline li {
display: inline-block;
margin-right: 5px;
}
}
```
注释:
```
/* 给页脚添加底部边框 */
footer {
border-top: 1px solid #ccc;
padding: 30px 0; /* 添加上下内边距 */
}
/* 链接样式 */
footer a {
color: #666; /* 设置链接颜色 */
}
footer a:hover {
color: #333; /* 设置链接鼠标悬停时的颜色 */
}
/* 列表样式 */
footer ul {
margin: 0; /* 清除列表外边距 */
padding: 0; /* 清除列表内边距 */
list-style: none; /* 去掉列表默认样式 */
}
/* 没有下划线的链接 */
footer ul li a {
text-decoration: none; /* 去掉链接下划线 */
}
/* 列表项之间的间距 */
footer ul li {
margin-bottom: 10px; /* 设置列表项之间的下边距 */
}
/* 列表项图标 */
footer ul li a i {
font-size: 1.5em; /* 设置图标字体大小 */
margin-right: 10px; /* 设置图标和文本之间的右边距 */
}
/* 响应式样式 */
@media (max-width: 767px) {
footer ul.list-inline li {
display: inline-block; /* 设置列表项显示方式为行内块级元素 */
margin-right: 5px; /* 设置列表项之间的水平间距 */
}
}
```