美团移动端主页+订单界面
2024-05-11 08:38:56
外卖订单界面
美团移动端界面
房事不利得找老中医
html代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="index.css"><link rel="stylesheet" href="icon/iconfont.css"></head><body><div class="box"><header><div class="header_top"><span class="iconfont icon-zuobiao"></span><a>乌鲁木齐 ></a><div class="temperature"><p>晴</p><h5>-3°C<h5></div><div class="hhh"><h6 class="iconfont icon-taiyang"></h6><h7 class="iconfont icon-xiaoxi"></h7></div></div><div class="header_bottom"><input type="text" placeholder="快餐"></div></header><section><div class="top"><img src="data:images/banner1.png" alt=""><img src="data:images/banner2.png" alt=""></div><div class="nav"><li><img src="data:images/nav1.png" alt=""><span>美食</span></li><li><img src="data:images/nav2.png" alt=""><span>超市便利</span></li><li><img src="data:images/nav3.png" alt=""><span>蔬菜水果</span></li><li><img src="data:images/nav4.png" alt=""><span>美团转送</span></li><li><img src="data:images/nav5.png" alt=""><span>跑腿代购</span></li><li><img src="data:images/nav6.png" alt=""><span>午餐优选</span></li><li><img src="data:images/nav7.png" alt=""><span>甜点饮品</span></li><li><img src="data:images/nav8.png" alt=""><span>全程朕选</span></li><li><img src="data:images/nav9.png" alt=""><span>房事不利</span></li><li><img src="data:images/nav10.png" alt=""><span>见面配送费</span></li></div><div class="title"><h2>优惠专区</h2><span class="iconfont icon-gouwuche"></span></div><div class="shop"><img src="data:images/shop1.png" alt=""><img src="data:images/shop2.png" alt=""></div><div class="food"><li><p>必吃</p><span>9.9元起抢</span></li><li><p>大牌</p><span>配送费0元起</span></li><li><p>水果食材</p><span>年终惊喜GO</span></li><li><p>屈臣氏</p><span>面膜一元抢购</span></li></div><div class="title2"><h4>为你优选</h4><span>更多 ></span></div><div class="hotelfather"><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="data:images/hotel1.png" alt=""><span>嘉和一品粥（金....</span></div><a>包子粥铺中的点评人气餐厅</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="data:images/hotel2.png" alt=""><span> 玛喜达韩国年糕....</span></div><a>韩国料理中的点评人气餐厅</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="data:images/hotel3.png" alt=""><span>西北啥面村（北...</span></div><a>根据你吃过的店推荐</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="data:images/hotel4.png" alt=""><span>小豪水饺</span></div><a>根据你看过的店推荐</a></div></div></section><footer><li><img src="data:images/finally1.png" alt=""><span>首页</span></li><li><img src="data:images/finally2.png" alt=""><span>订单</span></li><li><img src="data:images/finally3.png" alt=""><span>我的</span></li></footer></div><script src="lib/lib-flexible/index.js"></script>
</body></html>
css代码
* {margin: 0;padding: 0;
}element.style {font-size: 100px;
}input {border: none;
}a {text-decoration: none;
}li {list-style: none;
}.box {display: flex;flex-direction: column;
}html body,
.box {height: 100%;
}.box header {height: 0.85rem;width: 3.75rem;background-color: #ffc848;display: flex;flex-direction: column;
}header .header_top {height: 0.785rem;width: 3.75rem;display: flex;flex-direction: row;margin-top: -0.02rem;
}header .header_top span {font-size: 0.18rem;display: block;height: 0.145rem;margin-left: 0.13rem;margin-top: 0.12rem;
}header .header_top a {font-size: 0.145rem;margin-top: 0.12rem;
}i {list-style: none;
}.temperature {display: flex;flex-direction: column;align-items: flex-end;width: 0.22rem;height: 0.205rem;margin-top: 0.1rem;margin-left: 1.78rem;
}.temperature p {font-size: 0.105rem;
}.hhh {display: flex;flex-direction: row;
}.header_top .hhh h6 {font-size: 0.225rem;font-weight: 200;margin-top: 0.1rem;/* padding-right: 0.4025rem; */margin-left: 0.025rem;
}.header_top .hhh h7 {display: block;font-size: 0.19rem;font-weight: 200;margin-top: 0.11rem;margin-left: 0.125rem
}.header_bottom {text-align: center;height: 0.465rem;margin-top: -0.405rem;
}.header_bottom input {width: 3.35rem;height: 0.35rem;color: #a5a5a3;margin-left: 0.01rem;border-radius: 0.03rem;font-size: 0.13rem;color: #999999;padding-left: 0.1rem;
}section .top {text-align: center;margin-top: 0.152rem;
}section .nav {height: 1.69rem;width: 3.75rem;display: flex;flex-direction: row;
}.nav {width: 3.75rem;height: 1.69rem;flex-wrap: wrap;margin-top: 0.14rem;
}.nav li {display: flex;flex-direction: column;align-items: center;padding-left: 0.165rem;padding-right: 0.135rem;
}.nav li span {font-size: 0.08rem;color: #111;margin-top: 0.075rem;
}.title {height: 0.54rem;display: flex;flex-direction: row;justify-content: space-between;/* background-color: pink; */
}.title h2 {font-size: 0.185rem;font-weight: 600;margin-left: 0.2rem;margin-top: 0.299rem;
}.title span {font-size: 0.32rem;color: #666666;margin-right: 0.22rem;
}.shop {margin-top: 0.11rem;margin-left: 0.1rem;
}.shop img:nth-child(2) {margin-left: 0.025rem;
}.food {width: 3.7rem;height: 1.1rem;display: flex;flex-direction: row;justify-content: space-around;margin-top: 0.03rem;
}.food li {width: 0.85rem;height: 1.1rem;
}.food li p {font-size: 0.13rem;
}.food li span {font-size: 0.1rem;color: #848483;
}.food li:nth-child(1) {background: url(images/food1.png) no-repeat;margin-left: 0.09rem;/* margin-right: 0.043rem; */
}.food li:nth-child(2) {background: url(images/food2.png) no-repeat;margin-left: 0.023rem;
}.food li:nth-child(3) {background: url(images/food3.png) no-repeat;margin-left: 0.023rem;
}.food li:nth-child(4) {background: url(images/food4.png) no-repeat;margin-right: 0.043rem;margin-left: 0.023rem;
}.title2 {height: 0.425rem;width: 3.75rem;line-height: 0.425rem;display: flex;flex-direction: row;
}.title2 h4 {font-size: 0.185rem;color: #333333;margin-left: 0.11rem;
}.title2 span {font-size: 0.11rem;color: #7a7a7a;margin-left: 2.475rem;margin-top: 0.05rem;
}.hotelfather {display: flex;flex-direction: row;flex-wrap: wrap;
}.hotel1 {width: 1.72rem;height: 1.225rem;margin-left: 0.1rem;
}.hotel1_one {width: 1.71rem;height: 0.83rem;background: url(images/food5.png) no-repeat;border: 1px solid #e4e4e4;display: flex;flex-direction: column;
}.images {display: flex;flex-direction: row;
}.images span {font-size: 0.12rem;margin-left: 0.195rem;
}.hotel1 a {font-size: 0.1rem;color: #666666;margin-left: 0.125rem;
}.hotel1 .images img {display: block;margin-top: -0.20rem;margin-left: 0.1rem;
}.hotelfather .hotel1:nth-child(2) .hotel1_one {width: 1.71rem;height: 0.83rem;background: url(images/food6.png) no-repeat;border: 1px solid #e4e4e4;display: flex;flex-direction: column;
}.hotelfather .hotel1:nth-child(3) .hotel1_one {width: 1.71rem;height: 0.83rem;background: url(images/food7.png) no-repeat;border: 1px solid #e4e4e4;display: flex;flex-direction: column;
}.hotelfather .hotel1:nth-child(4) .hotel1_one {width: 1.71rem;height: 0.83rem;background: url(images/food8.png) no-repeat;border: 1px solid #e4e4e4;display: flex;flex-direction: column;
}footer {width: 3.75rem;height: 0.49rem;background-color: #f3f1eb;display: flex;flex-direction: row;justify-content: space-around;
}footer li {margin-top: 0.06rem;display: flex;flex-direction: column;align-items: center
}footer li span {font-size: 0.105rem;color: #bebbb8;margin-top: 0.03rem;
}footer li:nth-child(1) span {color: #111;
}footer li:nth-child(2) span {margin-top: 0.015rem;
}footer li:nth-child(3) img {margin-top: -0.032rem;
}
还是从上往下写，先写header然后section最后footer，用div box把他们包起来，这样权重会高一些，在引入图标css调整字体大小的时候不会被覆盖。
做nav导航的时候会遇到上下左右排列不齐的问题，如果是主轴，那就给父元素一个flex,然后justify-content:space-around;使每个项目两侧间隔相等，nav是用li做的，然后给每个li给个宽度，li里面的图片与文字呈上下，给ul一个flex，align-items:center，上下对齐后再用margin padding解决细节的边距。想不到名字了最后凑了个小豪水饺，大家多捧场(●’◡’●)
美团移动端主页+订单界面相关推荐
- HTML+CSS 轮播图 电商网站注册界面 抽屉主页头部界面
[练习]HTML+CSS 作业要求1 京东首页轮播图,效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <he ...
- 在线考试系统（4）——学生端主页设计
目录 1.把主页分成4个部分 1.1 head.jsp 1.2 menu.jsp 1.3 default.jsp 1.4 foot.jsp 2.main.jsp主页设计 3.测试 1. ...
- 美团 iOS 端开源框架 Graver 在动态化上的探索与实践
近些年,移动端动态化技术可谓是"百花齐放",其中的渲染性能也是动态化技术一直在探索.研究的课题.美团的开源框架 Graver 也为解决动态化框架的渲染性能问题提供了一种新思路:关于 ...
- 关于网站主页的界面设计不同风格的探索
主页的美化首先要考虑风格的定位.任何主页都要根据主题的内容决定其风格与情势,由于只有情势与内容的完善同一,才能达到理想的宣传结果. 主页作为一种版面,既有笔墨,又有图片.笔墨有大有小,还有题目和正文之 ...
- html实现在线聊天,利用HTML5实现电脑端微信聊天窗口界面
特效描述:利用HTML5实现 电脑端 微信聊天 窗口界面.利用HTML5实现电脑端微信聊天窗口界面 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Thomas Bangalter 2 ...
- 利用MySQL实现一个类似美团外卖的外卖订单的数据库管理系统
利用MySQL实现一个类似美团外卖的外卖订单的数据库管理系统 本文的重点在于MySQL触发器的应用 1.数据库需求分析 1)数据库实体:客户.商家.商品.订单. 2)一个客户对应多个订单. ...
- PC端QQ登录界面的测试用例
PC端QQ登录界面的测试用例 功能 设置选项中网络设置选项能否正常使用 设置选项中登录服务器选项能否正常使用 不输入账号 密码是否能登录 输入账号与密码匹配是否能登录 输入账号与密码不匹配是否能登录 ...
- 27个漂亮的移动端注册/登录界面设计作品
英文:medium 作者:Muzli 译者:设计达人 链接:http://www.shejidaren.com/login-ui-for-mobile-apps.html 注册/登录界面是网站或APP ...
- 美团-移动端UI一致性解决方案
点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低 ...
最新文章
- ffmpeg解码视频存为BMP文件
- eclipse常用插件介绍
- 乐安全 支持x86_国产EDA又进一步！芯华章发布全新仿真技术：x86、ARM等架构通吃...
- 24小时轮播怎么实现的_轮播的实现方式
- python 获取闭包函数的参数
- android+命令行编译,打包生成apk文件,Android 使用Android Studio + Gradle 或 命令行 进行apk签名打包...
- oppo设备怎么样无需root激活XPOSED框架的教程
- 简单三个数比较大小 “？！”的用法
- 苹果电脑上超级好用的双栏文件管理器Commander One PRO版推荐给大家！
- chrome vue.js插件文档_常用web研发技术文档，这里都给你准备好了
- 一说起丁克，我们普遍的认知就是，不生孩子
- JavaScript开发环境Aptana
- mysql 数据库 方案_数据库mysql优化方案
- 自我监督学习和无监督学习_弱和自我监督的学习-第2部分
- MS08067红队攻防班 第五期开班啦！（2021年最后一期）
- coffeescript html5,CoffeeScript入门
- 鲁大师怎么查看cpu风扇转速|用鲁大师查看cpu风扇转速的方法
- 北京亚控笔试题目（2014年10月9日）
- 程序控制结构-飞机超速报警系统
- 解决“the security certificate for this site has been revoked.the site should not be trusted.”