项目准备
lib文件中存放外来的文件，就比如这个项目使用到字体图标，那存放的就是字体图标的文件，css 样式，images 重要的图片，uploads 页面随时更新的图片，其次就是html文件。
base.css
*{margin: 0;padding: 0;box-sizing: border-box;
}
a{text-decoration: none;}
img{width: 100%;vertical-align: middle;
}orders.css
body{background-color: #f7f7f8;
}/* common公共样式 */
.red{color: #cf4444;
}
.pannel{background-color: #fff;border-radius: 5px;margin-bottom: 10px;
}
.common_rest{display: flex;justify-content: space-between;font-size: 13px;color: #262626;margin-bottom: 29px;
}/* 主体部分 */
.main{/*下面设内边距是因为 固定定位脱标 会覆盖标准流的位置因此paading-bottom至少要大于等于固定部分的高度，防止被遮盖*/padding: 12px 11px 80px;
}
/* 用户信息开始 */
.main .user_msg{display: flex;padding: 15px 0 14px 11px;align-items: center;
}
.main .user_msg .login{width: 30px;height: 30px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 15px;margin-right: 12px;text-align: center;line-height: 30px;
}
.icon-location{font-size: 16px;color: #fff;
}
.main .user_msg .usr{flex: 1;
}
/* .main .user_msg .usr p{font-size: 15px;color: #262626;
}
.main .user_msg .usr p:last-child{font-size: 12px;color: #333;margin-top: 10px;
} */
.main .user_msg .usr .top{display: flex;align-items: center;
}
.main .user_msg .usr .top h5{width: 55px;font-size: 15px;color: #262626;
}
.main .user_msg .usr .top span{font-size: 13px;color: #333;
}
.main .user_msg .usr .bottom{margin-top: 10px;
}
.main .user_msg .usr .bottom span{font-size: 12px;color: #333;
}
.main .user_msg .more{width: 44px;height: 44px;text-align: center;line-height: 44px;
}
.icon-more{font-size: 10px;color: #808080;
}
/* 用户信息结束 *//*商品信息开始 */
.main .goods{/* 数量多少 是否留区域看产品经理 */display: flex;align-items: center;padding: 11px 0 11px 11px;}
.main .goods .pic{width: 85px;height: 85px;margin-right: 12px;
}.main .goods .info{flex: 1;
}
.main .goods .info .top{font-size: 13px;color: #262626;
}
.main .goods .info .center{width: 88px;height: 11px;background-color: #f7f7f8;margin-top: 7px;color: #888;font-size: 11px;
}
.main .goods .info .bottom{margin-top: 13px;
}
.main .goods .info .red i{font-size:20px;font-style: normal;
}
.main .info del{font-size: 9px;color: #999;
}
.main .goods .count{width: 44px;height: 44px;/* background-color: pink; */text-align: center;line-height: 44px;
}
.main .goods .count span{font-size: 7px;color: #262626;
}
.main .goods .count i{margin-left: 5px;font-size: 15px;color: #262626;font-style: normal;
}
/* 商品信息结束 *//* 配送方式开始 */
.main .rest{padding: 14px 15px 16px 13px;
}
.main .rest div:last-child{margin-bottom: 0px;
}
.main .rest h5{font-weight: 400;
}
.main .rest div:nth-child(2){justify-content: flex-start;
}
.main .rest div:nth-child(2) h5{margin-right: 19px;
}
.main .rest div:nth-child(2) span{font-size:12px;color: #989898;
}
/* 配送方式结束 *//* 总价格 */
.price{padding: 14px 15px 16px 13px;
}
.main .price h5{font-weight: 400;
}/* 总价格结束 *//* 主体部分结束 *//* 支付部分 */.pay{/* 一加上定位之后需要加上宽度，因为加上定位之后会脱标那盒子的宽度就不再默认为父元素的宽度 *//* 使用flex布局 给父元素加上flex 变身弹性盒子 */position: fixed;display: flex;/* 布局方式，空白都在两个盒子之间 *//* 改变主轴对称方式 */justify-content: space-between;/* 改变侧轴对称方式 使居中 */align-items: center;left: 0;bottom: 0;width: 100%;height: 80px;background-color: #fff;border-top: 1px solid #ededed;padding:0 10px;
}/*默认字体大小为12px */
/* 修改一些字体样式 */
.pay .left span{font-size: 11px;
}
.pay .left span i{font-size:20px;font-style: normal;
}
.pay .right a{display: block;width: 91px;height: 35px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border: none;border-radius: 3px;color: #fff;font-size: 13px;text-align: center;line-height: 35px;}
/* 支付部分结束 */
order.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>填写订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head>
<body><!-- 主体部分 内容随着手指滑动而滑动 --><div class="main"><!-- 用户信息 --><div class="user_msg pannel"><div class="login"><span class="iconfont icon-location"></span></div><div class="usr"><!-- <p>林丽 15896907282</p><p>北京市 海淀区 中关村软件园 信息科技大厦1号楼410#</p> --><!-- 姓名与联系方式都是后台数据，一般单独设置标签，这里可以设置div也可以设置p，只要把姓名 与 联系方式 再套一个标签就行因为想把姓名设置一个标题，标题是块级元素因此就不能使用p--><div class="top"><h5>林丽</h5><span>15896907282</span></div><div class="bottom"><span>北京市 海淀区 中关村软件园 信息科技大厦1号楼410#</span></div></div><div class="more"><span class="iconfont icon-more"></span></div></div><!-- 用户信息结束 --><!-- 商品购物信息 --><div class="pannel goods"><div class="pic"><a href="#"><img src="./uploads/pic.png" alt="图片加载不出来"></a></div><div class="info"><!-- 排列方式：h5pdiv--><div class="top">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 测温…</div><div class="center">粉色 红外体温计</div><div class="bottom"><span class="red">￥<i>266.00</i></span><del>￥266.00</del></div></div><div class="count"><span>x<i>1</i></span></div></div><!-- 商品购物信息结束 --><!-- 配送方式 --><div class="pannel rest"><div class="common_rest"><h5>配送方式</h5><span>顺丰快递</span></div><div class="common_rest"><h5>买家备注</h5><span>希望可以尽快发货，谢谢</span></div><div class="common_rest"><h5>支付方式</h5><span>支付宝<i class="iconfont"></i></span></div></div><!-- 配送方式结束 --><!-- 总价格 --><div class="pannel price"><div class="common_rest"><h5>配送方式</h5><span>顺丰快递</span></div><div class="common_rest"><h5>买家备注</h5><span>希望可以尽快发货，谢谢</span></div><div class="common_rest"><h5>支付方式</h5><span>支付宝<i class="iconfont"></i></span></div></div><!-- 总价格结束 --></div><!-- 主体部分结束 --><!-- 支付部分 固定定位 位置不会改变固定在屏幕上 --><div class="pay"><div class="left"><!-- 266.00是不固定，很多时候需要改变因此需要单独起个标签-->合计：<span class="red">￥<i>266.00</i></span></div><div class="right"><a href="#">去支付</a></div></div><!-- 支付部分结束 -->
</body>
</html>
页面效果
这里的数据以iphone6/7/8为例（之后会有含移动适配的页面，感谢b站黑马，项目来自于这上面的）
里面有设计稿，可以自己做一做，设计稿测量可以用PxCook或者PS
(移动端设计稿一般在开发模式下调为2x)
链接：https://pan.baidu.com/s/1S3K0AN2B6ersyEi4IPbIzg
提取码：2db0
