美团移动端主页+订单界面

#美团移动端主页+订单界面| 来源: 网络整理| 查看: 265

外卖订单界面在这里插入图片描述

美团移动端界面在这里插入图片描述

在这里插入图片描述房事不利得找老中医

html代码

Document 乌鲁木齐;> 晴 -3°C 美食超市便利蔬菜水果美团转送跑腿代购午餐优选甜点饮品全程朕选房事不利见面配送费优惠专区必吃 9.9元起抢大牌配送费0元起水果食材年终惊喜GO 屈臣氏面膜一元抢购为你优选更多;> 嘉和一品粥（金.... 包子粥铺中的点评人气餐厅玛喜达韩国年糕.... 韩国料理中的点评人气餐厅西北啥面村（北... 根据你吃过的店推荐小豪水饺根据你看过的店推荐首页订单我的

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解决细节的边距。想不到名字了最后凑了个小豪水饺，大家多捧场(●’◡’●)

【本文地址】

公司简介

联系我们