美团网站底部超链接部分设计实现

美团web项目底部超链接界面实现

美团网底部超链接（原网页图） 

1.设计思路

整体设计为一个div

竖着划分为5块div：前四块宽度各自占比18%，最后一块27%或28%

第一个div内部设计两个<dl> 无序列表

第二个div设计一个<dl>

第三个两个、第四个两个、第五个三个。

2.HTML设计如下：

 	<div class="footer1 sec1170 mb10">

 		<div class="f1_1" >
 			<dl>
 				<dt>用户帮助</dt>
 				<dd><a href="">申请退款</a></dd>
 				<dd><a href="">查看美团券密码</a></dd>
 				<dd><a href="">常见问题</a></dd>
 				<dd><a href="">用户协议</a></dd>
 				<dd><a href="">隐私政策</a></dd>
 				<dd><a href="">反诈骗公告</a></dd>
 				<dd><a href="">消费者权益保障</a></dd>
 			</dl>
 			<dl>
 				<dt>美团服务</dt>
 				<dd><a href="">美团外卖</a></dd>
 				<dd><a href="">美团酒店</a></dd>
 				<dd><a href="">猫眼电影</a></dd>
 				<dd><a href="">美团配送</a></dd>
 				<dd><a href="">美团云</a></dd>
 				<dd><a href="">大众点评</a></dd>
 				<dd><a href="">榛果民宿</a></dd>
 				<dd><a href="">无人配送</a></dd>
 			</dl>
 		</div> 
 		<div class="f1_1 left18">
 			<dl>
 				<dt>商家合作</dt>
 				<dd><a href="">美食商家入驻(非外卖)</a></dd>
 				<dd><a href="">美团外卖开店申请</a></dd>
 				<dd><a href="">美团收银官网</a></dd>
 				<dd><a href="">外卖配送加盟申请</a></dd>
 				<dd><a href="">美团点评餐饮学院</a></dd>
 				<dd><a href="">酒店商家入驻</a></dd>
 				<dd><a href="">境内度假商家入驻</a></dd>
 				<dd><a href="">综合商家入驻</a></dd>
 				<dd><a href="">榛果民宿房东商家入驻</a></dd>
 				<dd><a href="">商家开票申请</a></dd>
 				<dd><a href="">美团点评智能收银机</a></dd>
 				<dd><a href="">聚宝盆餐饮开放平台</a></dd>
 				<dd><a href="">美团点评收单</a></dd>
 				<dd><a href="">免费使用美团排队</a></dd>
 				<dd><a href="">快驴进货商家合作</a></dd>
 				<dd><a href="">美团闪购商家入驻</a></dd>
 			</dl>
 		</div>
 		<div class="f1_1 left36">
 			<dl>
 				<dt>代理商加盟</dt>
 				<dd><a href="">美团外卖代理商招募</a></dd>
 				<dd><a href="">到店餐饮代理商招募</a></dd>
 				<dd><a href="">非餐饮代理商招募</a></dd>
 				<dd><a href="">美团联盟</a></dd>
 				<dd><a href="">美团收银招募线上分销商</a></dd>
 				<dd><a href="">美团点评5S服务商招募</a></dd>
 				<dd><a href="">美团收单渠道代理商招募</a></dd>
 			</dl>
 			<dl>
 				<dt>美团规则</dt>
 				<dd><a href="">规则中心</a></dd>
 				<dd><a href="">规则目录</a></dd>
 				<dd><a href="">规则评议院</a></dd>
 			</dl>
 		</div>
  		<div class="f1_1 left54">
 			<dl>
 				<dt>关注美团</dt>
 				<dd><a href="">美团新浪微博</a></dd>
 			</dl>
 			<dl>
 				<dt>公司信息</dt>
 				<dd><a href="">关于我们</a></dd>
 				<dd><a href="">投资者关系</a></dd>
 				<dd><a href="">加入我们</a></dd>
 				<dd><a href="">商户诚信公约及管理办法</a></dd>
 				<dd><a href="">保险经纪资质</a></dd>
 			</dl>
 			<dl>
 				<dt>廉正举报</dt>
 				<dd><a href="">廉政邮箱</a></dd>
 			</dl>
 		</div>
 		<div class="f1_1 f1_2 left72">
 			<dl>
 				<dt>消费者服务热线</dt>
 				<dd><span>外卖消费者：</span><a href="">10109777</a></dd>
 				<dd><span>猫眼消费者：</span><a href="">10105335</a></dd>
 				<dd><span>其他消费者：</span><a href="">10107888</a></dd>
 			</dl>
 			<dl>
 				<dt>商家服务热线</dt>
 				<dd><span>外卖&餐饮商家：</span><a href="">10105557</a></dd>
 				<dd><span>休闲娱乐、丽人、ktv、教育、结婚、亲子、家装等商家：</span></dd>
 				<dd><a href="">10100107</a></dd>
 			</dl>
 			<dl>
 				<dt>投诉举报热线</dt>
 				<dd><span>违法和不良信息举报电话：</span><a href="">4006018900</a></dd>
 				<dd><span>举报邮箱：</span><a href="">tousujubao@meituan.com</a></dd>
 			</dl>
 			<dl>
 				<dt><a href="">商家自助入驻美团入口</a></dt>
 			</dl>
 		</div>
 	</div>

3.CSS设计如下：

.sec1170{           /*给所有大的区块一个统一的样式*/
	width:1170px;
	margin:0 auto;
}
.mb10{
	margin-bottom: 10px;
}
a{
	color:#666;
}
a:hover{
	color:#2bb8aa;
}
.footer1{
	position: relative;/*设置相对定位，便于以下五个div的位置定位*/
	height: 480px;
	padding: 20px 30px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	margin-top: 35px;
}
.f1_1{
	width: 18%;/*前四个div的宽度设为整个宽度的18%*/
	position: absolute;
}
.f1_2{
	width: 27%;/*第五个div的宽度*/
}
.f1_2 span{
	color: #666;
	text-decoration: none;
}
.f1_1 dl{
	margin-top: 15px;
}
.f1_1 dt{
	/*无序列表标题*/
	font-size:16px;
	height: 40px;
	line-height: 40px;
	color: #333;
}
.f1_1 dd{
	/*无序列表各个元素*/
	height: 24px;
	line-height: 24px;
}
.left18{
	/*第二个div向左偏移18%即第一个div的宽度*/
	left: 18%;
	position: absolute;
}
.left36{
	/*第三个div向左偏移36%即前两个div的宽度*/
	left: 36%;
	position: absolute;
}
.left54{
	/*第四个div向左偏移54%即前三个div的宽度*/
	left: 54%;
	position: absolute;
}
.left72{
	/*第五个div向左偏移72%即前四个div的宽度*/
	left: 72%;
	position: absolute;
}

4.设计界面效果