<
>
实战HTML：部分美团首页静态界面
发布日期：2021-06-30 15:46:11
浏览次数：2
分类：技术文章
本文共 21375 字，大约阅读时间需要 71 分钟。
好久没写html界面了，一个工作的朋友让我帮他写一下，写了写，果然生疏的很，不过还是完成了。运行效果
代码
1.html
Title
美食＞
外卖＞
酒店＞
民宿＞
猫眼电影＞
机票/火车票＞
休闲娱乐/KTV＞
生活服务＞
丽人/美发/医学美容＞
结婚/婚纱摄影/婚宴＞
亲子/儿童乐园/幼教＞
运动健身/健身中心＞
家装/建材/家居＞
学习培训/音乐培训＞
医疗健康/宠物/爱车＞
酒吧/密室逃脱＞
Hi！你好注册立即登录美团APP手机版
1元起 吃喝玩乐
1.css
*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box;}body{ height: 100%; width: 100%; background-color: #F8F8F8;}.main{ width: 80%; background-color: #FFF; margin: 0 auto; display: flex; flex-direction: row;}.main .main-left{ flex: 2; height: 500px;}.main .main-left .main-left-content{ padding:5px;}.main .main-left .main-left-content ul li{ position: relative; height: 30px; display: flex; align-items: center;}.main .main-left .main-left-content ul li img{ display: inline-block; width: 20px; height: 20px; margin-right: 5px;}.main .main-left .main-left-content ul li span:nth-child(n+3){ margin-left: 6px;}.main .main-left .main-left-content ul li i{ font-style: normal; position: absolute; right: 10px;}.main .main-left .main-left-content ul li .select{ cursor: pointer;}.main .main-middle{ flex: 5; height: 500px;}.main .main-middle .main-middle-content{ height: 96%; width: 98%; margin: 1.5% auto 0;}.main .main-middle .main-middle-content .main-middle-content-top{ width: 100%; height: 60%; position: relative;}.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left{ height: 100%; width: 70%; position: absolute; left: 0; background: url("img/left.png"); background-size: cover;}.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left div{ height: 30px; width: 30px; border-radius: 50%; background-color: #5B5A5C; color:#ffffff; text-align: center; line-height: 30px; position: absolute;}.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left-prev{ top:48%; left: 2px;}.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left-next{ top:48%; right: 2px;}.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-right{ height: 100%; width: 28%; position: absolute; right: 0; background: url("img/right.jpg"); background-size: cover;}.main .main-middle .main-middle-content .main-middle-content-foot{ width: 100%; height: 40%; position: relative;}.main .main-middle .main-middle-content .main-middle-content-foot div{ height: 90%;}.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-left{ position: absolute; width: 34%; left: 0; top: 5%; background: url("img/footleft.png"); background-size: cover;}.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-middle{ width: 34%; position: absolute; left: 36%; top: 5%; background: url("img/footmiddle.jpg"); background-size: cover;}.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-right{ width: 28%; position: absolute; right: 0; top: 5%; background: url("img/footright.jpg"); background-size: cover;}.main .main-right{ flex: 2; height: 500px;}.main .main-right .main-right-content{ height: 94%; width: 98%; margin: 4% auto 0;}.main .main-right .main-right-content .main-right-content-top{ width: 90%; height: 61%; position: relative; background-color: #ffffff; border: 1px solid #e5e5e5;}.main .main-right .main-right-content .main-right-content-top .main-right-content-top-img{ height: 40px; width: 40px; border-radius: 50%; position: absolute; left: 50%; margin-left: -30px; top: 50px; background: url("img/user.jpg"); background-size: cover;}.main .main-right .main-right-content .main-right-content-top .main-right-content-top-content{ position: absolute; top:100px; left: 35%;}.main .main-right .main-right-content .main-right-content-top .main-right-content-top-login,.main .main-right .main-right-content .main-right-content-top .main-right-content-top-register{ width: 100px; height: 35px; border-radius: 40px; text-align: center; line-height: 35px; position: absolute; left: 28%; border: 1px solid #e5e5e5;}.main .main-right .main-right-content .main-right-content-top .main-right-content-top-login{ top:150px}.main .main-right .main-right-content .main-right-content-top .main-right-content-top-register{ top:200px}.main .main-right .main-right-content .main-right-content-foot{ width: 90%; height: 37%; margin-top: 4%; position: relative; border: 1px solid #e5e5e5;}.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-2D{ width: 100px; height: 100px; position: absolute; background: url("img/2D.jpg"); left: 28%; top: 20px;}.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content{ position: absolute; left: 25%; top: 125px;}.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content span{ font-size: 12px; margin-left: 14px;}.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content span.money{ color: #FF6600; font-size: 12px;} 2.html
Title 猫眼电影 即将上映 全部> ▲35187 人想看 大红包14116 人想看 灰烬重生11629 人想看 印度奇游10751 人想看 魔法学院8420 人想看 今生只为遇见你
2.css
*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box;}body{ height: 100%; width: 100%; background-color: #F8F8F8;}.main-second{ width: 80%; background-color: #FFF; margin: 0 auto;}.main-second .main-nav{ height: 40px; width: 100%; background-color: #FB3F60; color:#ffffff; position: relative; overflow: hidden;}.main-second .main-nav span:nth-child(1){ position:absolute; left: 10px; top:5px; font:20px MFShangHei-regular;}.main-second .main-nav span:nth-child(2){ position:absolute; left: 110px; top:8px; font-size:14px;}.main-second .main-nav span:nth-child(3){ position:absolute; right: 10px; top:8px; font-size:14px; cursor: pointer;}.main-second .main-nav span:nth-child(4){ position:absolute; left: 130px; bottom:-8px;}.main-second .main-content{ height: 400px; width: 100%; margin-top: 1px; display: flex; justify-content: space-evenly;}.main-second .main-content .main-contain-item{ height: 380px; width: 18%; margin-top: 5px; position: relative; color: #ffffff;}.main-second .main-content .main-contain-item:nth-child(1){ background: url("img/movie1.jpg"); background-size: cover;}.main-second .main-content .main-contain-item:nth-child(2){ background: url("img/movie2.jpg"); background-size: cover;}.main-second .main-content .main-contain-item:nth-child(3){ background: url("img/movie3.jpg"); background-size: cover;}.main-second .main-content .main-contain-item:nth-child(4){ background: url("img/movie4.jpg"); background-size: cover;}.main-second .main-content .main-contain-item:nth-child(5){ background: url("img/movie5.jpg"); background-size: cover;}.main-second .main-content .main-contain-item .main-contain-item-info{ height: 30%; width: 100%; position: absolute; bottom: 0; background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(29,45,55,0.80) 99%)}.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(1){ position: absolute; color: #FD9827; font-size: 18px; left: 10px; bottom: 35px;}.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(2){ position: absolute; font-weight:bolder; left: 70px; font-size: 14px; bottom: 35px;}.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(3){ position: absolute; left: 10px; font-size: 20px; bottom: 10px;} 3.html
Title 猜你喜欢 为你甄选最合适的▲
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
御足地带
☆ ☆ ☆ ☆ ☆ 1622个评价中国婚纱城
￥159.0起
3.css
*{ margin: 0; padding: 0; box-sizing: border-box;}.main{ width: 80%; margin: 0 auto;}.main .main-nav{ background-color: #53B2D9; height: 38px; width: 100%; color:#ffffff; position: relative; overflow: hidden;}.main .main-nav span:nth-child(1){ line-height: 38px; margin: 0 20px; font-family: '幼圆', serif; font-size: 18px;}.main .main-nav span:nth-child(2){ line-height: 38px; font-size: 13px;}.main .main-nav p{ position: absolute; bottom: -9px; left: 157px;}.main .main-content{ height: 600px; width: 100%; display: flex; justify-content: space-around; padding-top: 40px;}.main .main-content .main-content-item{ display: flex; flex-direction: column; justify-content: space-evenly; background-color: #fff; user-select: none;}.main .main-content .main-content-item div{ width: 100%;}.main .main-content .main-content-item .content-tag{ margin-top: 10px; padding: 5px; width: 100%; background-color: #fff;}.main .main-content .main-content-item .content-tag:hover{ background-color: #F4F4F4;}.main .main-content .main-content-item .content-tag img{ width: 160px; height: 100px; display: block; margin: 0 auto; cursor: pointer; border-radius: 5px;}.main .main-content .main-content-item .content-tag p{ margin: 5px;}.main .main-content .main-content-item .content-tag p.title{ font-size: 16px; cursor: pointer;}.main .main-content .main-content-item .content-tag p.place{ font-size: 12px;}.main .main-content .main-content-item .content-tag p.cost{ font-size: 14px; color: #FF6600; font-weight: bolder;}.main .main-content .main-content-item .content-tag .content-comment{ font-size: 12px; margin: 5px;}.main .main-content .main-content-item .content-tag .content-comment span{ cursor: pointer;} 4.html
Title 美团导航热门城市
- 深圳
- 温州
- 哈尔滨
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
- 太原
热门分类
- 酒店HOT
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
- 酒店
周边热门
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
- 美食
用户帮助
- 申请退款
- 申请退款
- 申请退款
- 申请退款
- 申请退款
- 申请退款
- 申请退款
美团服务
- 美团外卖
- 美团外卖
- 美团外卖
- 美团外卖
- 美团外卖
- 美团外卖
- 美团外卖
- 美团外卖
商家合作
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
- 美团餐饮商户中心
代理商加盟
- 美团外卖代理商招募
- 美团外卖代理商招募
- 美团外卖代理商招募
- 美团外卖代理商招募
- 美团外卖代理商招募
- 美团外卖代理商招募
- 美团外卖代理商招募
美团规则
- 规则中信
- 规则中信
- 规则中信
关注美团
- 美团新浪微博
公司信息
- 关于我们
- 关于我们
- 关于我们
- 关于我们
- 关于我们
廉政举报
- 廉政举报平台
知识产权
- 知识产权维权平台
消费者服务热线
- 外卖消费者：10109777
- 外卖消费者：10109777
- 外卖消费者：10109777
商家服务热线
- 外卖&餐饮商家：10105557
- 外卖&餐饮商家：10105557
- 外卖&餐饮商家：10105557
投诉举报热线
- 违法和不良信息举报电话：4006018900
- 举报邮箱：tousujubao@meituan.com
商家自助入驻美团入口
供应商注册入口
4.css
*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box;}body{ height: 100%; width: 100%; background-color: #F8F8F8;}.main-fourth{ margin: 70px auto 0; width: 80%; display: flex; flex-direction: row;}.main-fourth .main-content{ height: 100%; width: 100%;}.main-fourth .main-content .main-content-top{ height: 280px; width: 100%; background-color: #FFF; border: 1px solid #cccccc; border-radius: 5px;}.main-fourth .main-content .main-content-top>div{ height: 70px; width: 100%; position: relative;}.main-fourth .main-content .main-content-top .main-content-top-nav span{ position: absolute; left: 20px; line-height: 70px; font-size: 18px;}.main-fourth .main-content .main-content-top div .main-content-top-item{ height: 100%; width: 100px; position: absolute; left: 20px;}.main-fourth .main-content .main-content-top div .main-content-top-ul{ height: 80%; width: 800px; position: absolute; left: 110px;}.main-fourth .main-content .main-content-top div .main-content-top-ul ul{ width: 100%;}.main-fourth .main-content .main-content-top div .line{ border-bottom: 1px solid #cccccc;}.main-fourth .main-content .main-content-top div .main-content-top-ul ul li.hot-parent{ position: relative;}.main-fourth .main-content .main-content-top div .main-content-top-ul ul li.hot-parent .hot{ display: block; position: absolute; background-color: #FF4848; width: 40px; left: 30px; top: 0; text-align: center; color: #ffffff; border-radius: 10px;}.main-fourth .main-content .main-content-top div .main-content-top-ul ul li{ float: left; width: 80px; padding-bottom: 10px; font-size: 13px; color: #666666;}.main-fourth .main-content .main-content-foot{ margin-top: 40px; width: 100%; border-top: 1px solid #cccccc; display: flex; justify-content: space-evenly;}.main-fourth .main-content .main-content-foot>div{ padding-top: 30px; width: 19%;}.main-fourth .main-content .main-content-foot p{ color:#333333; font-size: 14px;}.main-fourth .main-content .main-content-foot li{ color:#666666; font-size: 12px;}.main-fourth .main-content .main-content-foot>div{ margin: 5px;}.main-fourth .main-content .main-content-foot>div div{ width: 100%; margin-top: 10px; position: relative; margin-bottom: 30px;}.main-fourth .main-content .main-content-foot>div li{ margin-top: 8px; cursor: pointer;}.main-fourth .main-content .main-content-foot>div li:hover{ color: #FF6600;} 转载地址：https://kaisarh.blog.csdn.net/article/details/105688755 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年04月20日 21时33分10秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
[10] JMeter-察看结果树，你知道都有哪些功能吗？
2019-05-01
[11] JMeter-结果分析之聚合报告
2019-05-01
[12] JMeter-结果分析之图形图表
2019-05-01
[13] JMeter-详解JMeter参数化之CSV Data Set Config
2019-05-01
[14] JMeter关联-详解JMeter正则表达式提取器
2019-05-01
优化jmeter脚本
2019-05-01
Gradle基础使用总结1
2019-05-01
性能测试场景设置---不同场景下对应的jmeter脚本【不定时补充】
2019-05-01
登录oracle数据库时常用的操作命令整理
2019-05-01
微信小程序实现安卓机下拉不刷新，ios下拉刷新操作（自定义底部tab栏在安卓机下拉）
2019-05-01
小程序动态获取组件高度(自定义Tabbar的高度)
2019-05-01
如何是实现微信会员开卡组件中一个手机号绑定一个微信号（思路篇）
2019-05-01
小程序实现sku商品规格
2019-05-01
js对象的属性用变量值代替
2019-05-01
小程序图片转Base64，方法总结
2019-05-01
element中路由跳转以后激活当前菜单高亮
2019-05-01
VUE中同级页面传参的方式
2019-05-01
微信小程序setData复杂数组的更新、删除、添加、拼接
2019-05-01
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 311409276 位访客
访问时间: 2024-05-06 14:49:58
访问IP: 3.137.175.113
Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1
手机版