目的：

实现美团网站底部的导航页面的设计

设计思路：

整体一个div-1

整体可分为上下两部分：上为——浅绿色背景；下为选项及选项内容

上部分的左侧设置一个div，存放美团导航文字内容

使用ul>li无序列表存放每个选项：热门城市、热门分类、周边热门

其中每个<li>包括左侧的文本以及右侧的展开选项。

右侧展开选项设置为两个<ul>无序列表。

具体div数目及包含关系见html代码

原网页样式如下：

菜鸟样式设计如下： 1.HTML代码设计：

     <div class="links sec1170 mb10"><div class="links_navbox"><div class="links_catebox"><h2>美团导航</h2><ul class="links_category"><li class="links_cateitem"><h3>热门城市</h3><div class="links_right1"><ul><li><a href="">深圳</a></li><li><a href="">佛山</a></li><li><a href="">天津</a></li><li><a href="">北京</a></li><li><a href="">无锡</a></li><li><a href="">长沙</a></li><li><a href="">成都</a></li><li><a href="">宁波</a></li><li><a href="">南京</a></li><li><a href="">东莞</a></li></ul><ul><li><a href="">福州</a></li><li><a href="">上海</a></li><li><a href="">贵阳</a></li><li><a href="">西安</a></li><li><a href="">厦门</a></li><li><a href="">大连</a></li><li><a href="">合肥</a></li><li><a href="">郑州</a></li><li><a href="">苏州</a></li><li><a href="">南宁</a></li></ul></div></li><li class="links_cateitem"><h3>热门分类</h3><div class="links_right1 links_right2"><ul><li><a href="">酒店</a></li><li><a href="">美食</a></li><li><a href="">休闲娱乐</a></li><li><a href="">运动健身</a></li><li><a href="">生活服务</a></li><li><a href="">上门服务</a></li><li><a href="">购物</a></li><li><a href="">时尚购</a></li><li><a href="">本地购物</a></li><li><a href="">结婚</a></li></ul><ul><li><a href="">摄影写真</a></li><li><a href="">宴会</a></li><li><a href="">丽人</a></li><li><a href="">母婴亲子</a></li><li><a href="">学习培训</a></li><li><a href="">家装</a></li><li><a href="">汽车服务</a></li><li><a href="">医疗</a></li><li><a href="">宠物</a></li></ul></div></li><li class="links_cateitem"><h3>周边热门</h3><div class="links_right1 links_right3"><ul><li><a href="">大厂回族自治县酒店</a></li><li><a href="">大厂回族自治县美食</a></li><li><a href="">廊坊休闲娱乐</a></li><li><a href="">廊坊运动健身</a></li><li><a href="">廊坊生活服务</a></li><li><a href="">廊坊上门服务</a></li><li><a href="">廊坊购物</a></li><li><a href="">大厂回族自治县时尚购</a></li><li><a href="">门头沟区本地购物</a></li><li><a href="">门头沟区结婚</a></li>    </ul><ul><li><a href="">廊坊摄影写真</a></li><li><a href="">廊坊宴会</a></li><li><a href="">大厂回族自治县丽人</a></li><li><a href="">大厂回族自治县母婴亲子</a></li><li><a href="">门头沟区学习培训</a></li><li><a href="">大厂回族自治县家装</a></li><li><a href="">门头沟区汽车服务</a></li><li><a href="">大厂回族自治县医疗</a></li><li><a href="">廊坊宠物</a></li></ul>                        </div></li></ul></div></div>  </div>

2.CSS样式设计：

.sec1170{           /*给所有大的区块一个统一的样式*/width:1170px;margin:0 auto;
}
.mb10{margin-bottom: 10px;
}
.links{height: 280px;border:1px solid #ddd;
}
.links_navbox{height: 40px;background: #2bb8aa;line-height: 40px;
}
.links_navbox h2{
/*左侧字体*/width:110px;height: 40px;text-align: center;color:#fff;
}.links_catebox{position: relative;/*父级元素设为相对定位方便后面子元素绝对定位*/
}
.links_category{
position: absolute;/*相对于catebox绝对定位*/
width: 110px;}
.links_cateitem{height: 78px;line-height: 40px;margin-left:20px;
}
.links_right1{
/*右侧具体选项*/width: 1060px;height: 75px;left:110px;top:0px;position: absolute;/*相对于catebox绝对定位*/border-bottom:1px solid #ddd;margin-top: 8px;margin-bottom: 5px;
}
.links_right1 ul{display: inline-block;/*为了让两个ul并列*/
}
.links_right1 li{height: 25px;width: 80px;text-align: left;line-height: 25px;float: left;overflow: hidden;/*溢出部分隐藏*/text-overflow: ellipsis;/*字溢出的部分显示为"..."*/white-space: nowrap;/*表示不换行*/margin-right: 15px;
}
.links_right2{
/*表示第二行li*/top:80px;
}
.links_right3{
/*表示第三行li*/top:160px;border-bottom: none;
}

美团网官网最新底部导航页面制作及CSS样式设计相关推荐

认识新华三官网官网下载网络模拟器HCL的安装了解HCL
学会新华三网络模拟器及入门使用认识新华三官网官网下载网络模拟器 HCL的安装了解HCL 认识界面项目的保存项目的打开 HCL关联CRT或XShell 简单的小实验结束语认识新华三官网首 ...
skinsdog 狗网官网可直接取回CSGO皮肤开箱网站
skinsdog 狗网官网可直接取回CSGO皮肤开箱网站官方链接: skinsdog.cc 注册登录自动免费获得$0.8美金推广码: csgogo (注册使用送0.8美金) 支付: 微信支付宝 ...
skinsdog 狗网官网CSGO饰品皮肤开箱网站可直接取回
skinsdog 狗网官网CSGO饰品皮肤开箱网站可直接取回官方链接: skinsdog.cc 注册登录自动免费获得$0.8美金推广码: csgogo (注册使用送0.8美金) 支付: 微信支付 ...
计算机考研340分什么概念,考研340分什么概念_中国考研网官网入口
考研340分什么概念_中国考研网官网入口由广东研究生考试网考试快讯栏目由提供,更多关于考研340分什么概念,中国考研网官网入口,广东研究生考试快讯的内容,请关注广东研究生考试频道/广东人事考试网! 从 ...
skinsdog 狗网官网CSGO国服可直接取回饰品皮肤开箱网站
skinsdog 狗网官网CSGO国服可直接取回饰品皮肤开箱网站官方链接: skinsdog.cc 注册登录自动免费获得$0.8美金推广码: csgogo (注册使用送0.8美金) 支付: 微信 ...
四川省教育考试院计算机准考证打印,四川省教育考试网官网准考证打印
高等教育自学考试的考试时间慢慢临近,备考复习也越来越紧张,四川自考网蓝优悠教育中心的自考助手为大家精心准备了"四川省教育考试网官网准考证打印"内容,希望帮助同学们做好自考备考准备, ...
老牌网站skinsdog 狗网官网可直接取回CSGO饰品开箱网站
老牌网站skinsdog 狗网官网可直接取回CSGO饰品开箱网站官方链接: skinsdog.cc 注册登录自动免费获得$0.8美金取回状态: 直接取回优惠码: csgogo (注册使用送0.8 ...
狗网官网farlucky 官网可直接取回CSGO饰品皮肤网页开箱网站
狗网官网farlucky 官网可直接取回CSGO饰品皮肤网页开箱网站 farlucky 官网可直接取回CSGO饰品皮肤网页开箱网站官方链接: skinsdog.cc 邀请码: csgo (注册使用可 ...
达达兔网站服务器是哪里,达达兔影院网官网
达达兔是一款掌上的影院,你可以在这里收看到不同的影视作品,更多的影视作品离线在线都可以看,经典的,新颖的,喜爱看电影追剧的朋友绝对不能错过的一款app,全网优质的影视轻松观看,享受精彩的剧集. 达达兔 ...
android xlintdeprecation 重新编译,天博体育官网-官网首页
PC Flutter 裁剪布局之 ClipRect.ClipRRect.ClipOval.ClipPath.CustomClipper. 斯坦福大学公开课机器学习:Neural network-mod ...

美团网官网最新底部导航页面制作及CSS样式设计

目的：

设计思路：

原网页样式如下：

菜鸟样式设计如下： 1.HTML代码设计：

2.CSS样式设计：

美团网官网最新底部导航页面制作及CSS样式设计相关推荐

最新文章

热门文章