外卖订单界面
美团移动端界面
房事不利得找老中医
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="images/banner1.png" alt=""><img src="images/banner2.png" alt=""></div><div class="nav"><li><img src="images/nav1.png" alt=""><span>美食</span></li><li><img src="images/nav2.png" alt=""><span>超市便利</span></li><li><img src="images/nav3.png" alt=""><span>蔬菜水果</span></li><li><img src="images/nav4.png" alt=""><span>美团转送</span></li><li><img src="images/nav5.png" alt=""><span>跑腿代购</span></li><li><img src="images/nav6.png" alt=""><span>午餐优选</span></li><li><img src="images/nav7.png" alt=""><span>甜点饮品</span></li><li><img src="images/nav8.png" alt=""><span>全程朕选</span></li><li><img src="images/nav9.png" alt=""><span>房事不利</span></li><li><img src="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="images/shop1.png" alt=""><img src="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="images/hotel1.png" alt=""><span>嘉和一品粥（金....</span></div><a>包子粥铺中的点评人气餐厅</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="images/hotel2.png" alt=""><span> 玛喜达韩国年糕....</span></div><a>韩国料理中的点评人气餐厅</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="images/hotel3.png" alt=""><span>西北啥面村（北...</span></div><a>根据你吃过的店推荐</a></div><div class="hotel1"><div class="hotel1_one"></div><div class="images"><img src="images/hotel4.png" alt=""><span>小豪水饺</span></div><a>根据你看过的店推荐</a></div></div></section><footer><li><img src="images/finally1.png" alt=""><span>首页</span></li><li><img src="images/finally2.png" alt=""><span>订单</span></li><li><img src="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解决细节的边距。想不到名字了最后凑了个小豪水饺，大家多捧场(●’◡’●)
