用html+css写一个页脚页面,该页面的文字分为上下两行显示,每行的文字又分为4个独立的区域,文字内容为关于我们,联系我们,联系客服,合作招商,营销中心,手机京东,友情链接,京东社区
时间: 2024-06-12 19:05:46 浏览: 129
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页脚页面</title>
<style>
.footer {
background-color: #f2f2f2;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.5;
}
.footer .row {
display: flex;
flex-direction: column;
margin-right: 20px;
}
.footer .row:last-child {
margin-right: 0;
}
.footer .row h4 {
margin: 0 0 10px 0;
font-weight: bold;
}
.footer .row a {
color: #666;
text-decoration: none;
margin-bottom: 5px;
}
.footer .row a:hover {
color: #ff6600;
}
</style>
</head>
<body>
<div class="footer">
<div class="row">
<h4>关于我们</h4>
<a href="#">公司简介</a>
<a href="#">加入我们</a>
<a href="#">联系我们</a>
<a href="#">商家入驻</a>
</div>
<div class="row">
<h4>联系客服</h4>
<a href="#">在线客服</a>
<a href="#">客服热线</a>
<a href="#">意见反馈</a>
<a href="#">帮助中心</a>
</div>
<div class="row">
<h4>合作招商</h4>
<a href="#">品牌合作</a>
<a href="#">广告合作</a>
<a href="#">供应商入驻</a>
<a href="#">京东物流</a>
</div>
<div class="row">
<h4>营销中心</h4>
<a href="#">京东秒杀</a>
<a href="#">优惠券</a>
<a href="#">京东金融</a>
<a href="#">京东超市</a>
</div>
<div class="row">
<h4>手机京东</h4>
<a href="#">下载APP</a>
<a href="#">手机频道</a>
<a href="#">手机配件</a>
<a href="#">摄影摄像</a>
</div>
<div class="row">
<h4>友情链接</h4>
<a href="#">中国京东</a>
<a href="#">京东商城</a>
<a href="#">京东金融</a>
<a href="#">京东物流</a>
</div>
<div class="row">
<h4>京东社区</h4>
<a href="#">社区首页</a>
<a href="#">社区服务</a>
<a href="#">社区活动</a>
<a href="#">社区问答</a>
</div>
</div>
</body>
</html>