写一个旅游网页的页脚,带二维码,并注释
时间: 2024-04-01 15:35:25 浏览: 18
好的,以下是一个简单的旅游网页的页脚,带有二维码和注释:
HTML代码:
```
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>联系我们</h5>
<ul class="list-unstyled">
<li>客服电话:400-123-4567</li>
<li>客服邮箱:service@travel.com</li>
<li>地址:北京市海淀区中关村东路1号</li>
</ul>
</div>
<div class="col-md-4">
<h5>关于我们</h5>
<ul class="list-unstyled">
<li><a href="#">公司简介</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>扫码下载APP</h5>
<div class="qr-code">
<img src="images/qr-code.png" alt="扫码下载APP">
<p>下载APP,赚取积分</p>
</div>
</div>
</div>
</div>
</footer>
```
CSS代码:
```
/* 页脚样式 */
footer {
background-color: #f5f5f5;
padding: 50px 0;
}
/* 标题样式 */
footer h5 {
margin-top: 0;
margin-bottom: 10px;
font-weight: bold;
font-size: 18px;
}
/* 列表样式 */
footer ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 列表项样式 */
footer ul li {
margin-bottom: 10px;
}
/* 链接样式 */
footer a {
color: #333;
}
footer a:hover {
color: #666;
}
/* 二维码样式 */
footer .qr-code {
display: inline-block;
margin-top: 20px;
text-align: center;
}
footer .qr-code img {
max-width: 100%;
height: auto;
}
footer .qr-code p {
margin-top: 5px;
font-size: 14px;
color: #999;
}
/* 响应式样式 */
@media (max-width: 767px) {
footer .qr-code {
margin-top: 30px;
}
}
```
注释:
```
/* 页脚样式 */
footer {
background-color: #f5f5f5; /* 设置背景颜色 */
padding: 50px 0; /* 添加上下内边距 */
}
/* 标题样式 */
footer h5 {
margin-top: 0; /* 去掉标题上边距 */
margin-bottom: 10px; /* 设置标题下边距 */
font-weight: bold; /* 设置标题加粗 */
font-size: 18px; /* 设置标题字体大小 */
}
/* 列表样式 */
footer ul {
margin: 0; /* 清除列表外边距 */
padding: 0; /* 清除列表内边距 */
list-style: none; /* 去掉列表默认样式 */
}
/* 列表项样式 */
footer ul li {
margin-bottom: 10px; /* 设置列表项之间的下边距 */
}
/* 链接样式 */
footer a {
color: #333; /* 设置链接颜色 */
}
footer a:hover {
color: #666; /* 设置链接鼠标悬停时的颜色 */
}
/* 二维码样式 */
footer .qr-code {
display: inline-block; /* 设置二维码为行内块级元素 */
margin-top: 20px; /* 设置二维码与上方元素的垂直间距 */
text-align: center; /* 设置二维码水平居中 */
}
footer .qr-code img {
max-width: 100%; /* 设置二维码最大宽度为100% */
height: auto; /* 设置二维码高度自适应 */
}
footer .qr-code p {
margin-top: 5px; /* 设置二维码文本与二维码之间的垂直间距 */
font-size: 14px; /* 设置二维码文本字体大小 */
color: #999; /* 设置二维码文本颜色 */
}
/* 响应式样式 */
@media (max-width: 767px) {
footer .qr-code {
margin-top: 30px; /* 在小屏幕下增加二维码与上方元素的垂直间距 */
}
}
```