代码
.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="use-msg pannel"> <div class="location"> <i class="iconfont icon-location"></i> </div> <div class="use"> <div class="top"> <h5>李无敌</h5><p>1888888888</p> </div> <div class="bottom">中国大陆 北京市 </div> </div> <div class="more"> <i class="iconfont icon-more"></i> </div> </div> <!-- 用户信息 --> <!-- 商品区域 --> <div class="pannel goods"> <div class="pic"> <a href="#"><img src="./uploads/pic.png" alt=""></a> </div> <div class="info"> <h5>康贝尔</h5> <p><span>粉色</span> <span>红色体温计</span></p> <div class="price"> <span class="red">￥ <i>1</i></span> <span>￥100</span> </div> </div> <div class="count"> <i class="iconfont icon-x"></i><span>1</span> </div> </div> <!-- 商品区域 --> <!-- 其他区域 --> <section class="pannel rest"> <div> <h5>配送方式</h5> <p>顺丰快递</p> </div> <div> <h5>配送方式</h5> <p>顺丰快递</p> </div> <div> <h5>配送方式</h5> <p>顺丰快递</p> </div> </section> <!-- 其他区域 --> </div> <!-- 主题内容：滑动查看 --> <!-- 底部内容：支付操作 --> <div class="pay"> <div class="left"> 合计：<span class="red">￥<i>466.00</i></span> </div> <div class="right"> <a href="#">去支付</a> </div> </div> <!-- 底部内容：支付操作 --> </body> </html>
.css
body { background-color: #f7f7f8; } /* .red */ .red { color: #cf4444; } /* 公共样式 */ .pannel { margin-bottom: 10px; background-color: #fff; border-radius: 5px; } /* 主题内容：滑动查看 */ .main { padding: 12px 11px 80px; } /* 用户信息 */ .use-msg { display: flex; align-items: center; padding: 15px 0px 15px 11px; } .use-msg .location i { display: block; width: 30px; height: 30px; margin-right: 10px; text-align: center; line-height: 30px; background-image: linear-gradient( 90deg, #6fc2aa 5%, #54b196 100% ); border-radius: 50%; color: #fff; } .use-msg .use { flex: 1; } .use-msg .top { display: flex; } .use-msg .top h5 { width: 55px; } .use-msg .bottom { font-size: 12px; margin-top: 5px; } .use-msg .more i { display: block; width: 40px; height: 40px; text-align: center; line-height: 44px; color: #808080; } /* 商品区域 */ .goods { align-items: center; padding: 11px 0px 11px 11px; display: flex; } .goods .pic { margin-right: 10px; width: 85px; } .goods .info { flex: 1; } .goods .count { width: 44px; height: 44px; text-align: center; line-height: 44px; } .goods .info h5 { font-size: 13px; color: #262626; font-weight: 400px; } .goods .info p { ruby-merge: 5px 0; width: 95px; height: 16px; color: #888888; font-size: 12px; background-color: #f7f7f8; } .goods .info p span:nth-child(1) { margin-right: 5px; } .goods .info .price { font-size: 12px; } .goods .info .price span:nth-child(1) { margin-right: 5px; } .goods .info .price span:nth-child(2) { color: #999999; text-decoration: line-through; } .goods .info .price i { font-size: 16px; } /* 其他区域 */ .rest { padding: 13px; } .rest div { display: flex; margin-bottom: 30px; } .rest div:nth-child(3) { margin-bottom: 0px; } .rest div:nth-child(2n+1) { justify-content: space-between; } .rest div:nth-child(2) h5 { margin-right: 20px; } .rest div h5, .rest div p { font-size: 13px; color: #262626; font-weight: 400; } .rest div:nth-child(2) p { font-style: 12px; color: #989898; } /* 主题内容：滑动查看 */ /* 底部内容：支付操作 */ .pay { /* 这个支付界面肯定是要一直固定在末尾的，这样子就可以方便 有用户进行支付 */ position: fixed; display: flex; bottom: 0px; left: 0px; height: 78px; /* 宽度是要加的 */ width: 100%; padding: 0 11px; border: 1PX solid #ededed; justify-content: space-between; align-items: center; } .pay .left { font-size: 12px; } .pay .left i { font-size: 20px; } .pay .right a { display: block; width: 90px; height: 35px; border-radius: 3px; text-align: center; line-height: 35px; color: #ffffff; font-size: 13px; background-image: linear-gradient( 90deg, #6fc2aa 5%, #54b196 100% ); }
补充：大体框架就是这样子，具体参数值需要修改。
总结：这个是移动端的支付界面，使用的是flex弹性布局效果，对于中间的这一部分内容，就是可以使用将中间内容中设置为填充满设于空间的知识就可以了。还有就是所有的细节都需要使用标签进行包裹，以便于后期进行数据修改。如果中间没有内容的话，就可以使用主轴上的布局显示效果，between，这样子就可以将两个盒子分别贴左右边了，还有就是可以使用侧轴居中效果将盒子居中显示。flex布局不仅仅使用于移动端业务，还可以适用于PC端业务因为flex布局就是为了布局而生，这样就可以避免使用浮动技术了。
