美团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.设计界面效果

美团网站底部超链接部分设计实现相关推荐

分享25个优秀的网站底部设计案例
相对于网站头部来说,关注网站底部设计的人很少.我们平常也能碰到有些网站的底部设计得很漂亮,给网站的呈现来一个完美的结尾.这篇文章收集了25个优秀的网站底部设计案例,一起欣赏. me & oli ...
33个优秀的网站底部设计案例欣赏
很多人常常只关注网站主体内容而会忽略在网站最末尾的网站底部,其实有些网站的底部设计得很漂亮,给网站的呈现来一个完美的结尾.这篇文章收集了33个漂亮的网站底部设计案例,希望能带给您灵感. DAVID H ...
自动更新网站底部 Copyright © 年份，减少网站维护工作量
不知不觉,基本上每年都是进入 footer.php 修改博客网站底部 Copyright © 年份,但是往往是在年后好久才想起来要改下这个可有可无的数值,那么为了更好的维护好这些网站,降低自己的工作量 ...
织梦dedecms在网站底部添加备案号链接到工信部的办法
大家可能收到过这样的短信:根据<非经营性互联网信息服务备案管理方法>规定,如果未在网站底部添加备案号,被相关部门核查出来将处以五千元以上一万元以下罚款.这是中国工业和信息化部对国内网站的整 ...
基于Html的购物网站的分析与设计
目录第一章绪论 1 1.1Html购物网站开发的背景 1 1.2 Html购物网站开发的目的和意义 1 1.3 Html购物网站开发的需求分析 1 第二章开发技术和工具的介绍 3 2.1开发技 ...
javaweb网站开发模板化设计
javaweb网站开发模板化设计 wang@20160620 前言前一段时间想要开发一个BS架构的应用程序调用我开发的通讯驱动接口来和硬件设备进行通讯测试,以验证我的驱动接口及硬件设备的下端程序通讯 ...
基于springboot的短视频网站的开发与设计
通知:代本科论文"润色"<基于视频监控的智慧消防系统>,可私聊. [注]该项目<基于springboot的短视频网站的开发与设计>为本人毕业设计.使用的开发 ...
404错误是找不到此页面吗,网站404页面如何设计?
404错误是找不到此页面吗,网站404页面如何设计? 浏览网站时,有时会突然出现404错误页面,提示当前页面不存在.那么,什么情况会导致页面丢失,出现404错误页面呢? (1)网站改版 (2)域名更换 ...
初探移动网站的架构和设计
标题整的太大了,所以为了不让各位看官们失望,请不要抱着太大的期望来看待本文.从2011年12月开始进行移动网站的开发,经历了一年多的跌打滚爬,虽没有金刚钻,但也有点小九九.本人参照了Maximilia ...

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

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

1.设计思路

2.HTML设计如下：

3.CSS设计如下：

4.设计界面效果

美团网站底部超链接部分设计实现相关推荐

最新文章

热门文章