Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期商城购物车和结算页面实战（2019-12-31）
Blogger Information
Blog 22
fans 1
comment 0
visits 17689
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十期商城购物车和结算页面实战（2019-12-31）
齐齐
Original
862 people have browsed it

1.商城购物车

作业要求：商城购物车部分页面中包括全选，单选按钮，并选中的状态。数量按钮可以增加和减少，加入购物车的产品为多个。底部需要有结算按钮，数量和总金额。

1.1 对页面结构进行分析，总体分为五部分。用一个容器（content）将全部内容包裹，方便水平居中显示。

1.2 整个购物车的布局技术采用flex，先设置主轴方向为列。然后再对每一个部分进行下一步的处理。
1.3第一部分比较简单，为一张图片。第二部分，转成flex容器的中的项目，在水平方向两端对齐。第三部分，flex容器水平方向分散对齐。
1.4第四部分，设为flex容器后，修改主轴改为列方向。再对每一个产品详情进行设置，也转为flex容器，方便设置每一个行内块的宽度。再用相对定位技术，让每一小块对齐相应的信息栏。

1.5最后一部分，现将容器转为flex，水平方向靠右对齐，垂直方向居中对齐。然后再对每一个小细节，进行相应的css设置。

html代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车</title>
  6.     <link rel="stylesheet" href="shop_cart.css">
  7. </head>
  8. <body>
  9. <!--导入头部组件-->
  10. <div class="public-head">
  11.     <a href="">网站首页</a>
  12.     <a href="">专题</a>
  13.     <a href="">网站导航</a>
  14.     <a href="">二手商品</a>
  15.     <a href="">讨论区</a>
  16.     <span>
  17.          <a href=""><i class="iconfont icon-huiyuan2"></i> 登陆</a>
  18.          <a href="">免费注册</a>
  19.      </span>
  20. </div>
  21. <!--购物车-->
  22. <div class="shop-cart">
  23.     <div class="content">
  24.     <div class="cart-logo"><img src="../../static/images/logo.jpg" alt=""></div>
  25.     <div class="cart-num">
  26.        <span>全部商品 3</span>
  27.         <div class="cart-address">
  28.             <span>配送至：</span>
  29.                 <select name="cart-address">
  30.                     <option value="0">重庆xx号街道</option>
  31.                     <option value="1">沿河东路南段文星路314号</option>
  32.                     <option value="0">重庆市渝中区邹容路100号重庆时代广场B2</option>
  33.                     <option value="1" selected>重庆渝中区大溪沟人和街华福巷大厦1F（靠大礼堂300米）</option>
  34.                 </select>
  35.         </div>
  36.     </div>
  38.        <div class="cart-top">
  39.            <span><input type="checkbox"  id="all" checked><label for="all">全选</label></span>
  40.            <span>商品信息</span>
  41.            <span>单价</span>
  42.            <span>数量</span>
  43.            <span>金额</span>
  44.            <span>操作</span>
  45.        </div>
  46.         <div class="cart-list">
  47.              <div class="cart-infos">
  48.                 <span><input type="checkbox" name="select" checked></span>
  49.                 <span class="pic-infos">
  50.                     <a href=""><img src="../../static/images/lbx.jpg" alt=""></a>
  51.                     <a href="">买2送1七天量】黄金搭档中老年型多种复合维生素片年货礼盒保健品</a>
  52.                 </span>
  53.                  <span>￥288.00</span>
  54.                  <span><input type="number" name="conunt" value="1" min="1"/></span>
  55.                 <span>￥288.00</span>
  56.                 <span>
  57.                     <a href="">删除</a>
  58.                 </span>
  59.              </div>
  60.             <div class="cart-infos">
  61.                 <span><input type="checkbox" name="select" checked></span>
  62.                 <span class="pic-infos">
  63.                     <a href=""><img src="../../static/images/bx.jpg" alt=""></a>
  64.                     <a href="">海尔出品Leader/统帅 BC/BD-427TD 427升大容量商用冷藏冷冻冰柜</a>
  65.                 </span>
  66.                 <span>￥2299.00</span>
  67.                 <span><input type="number" name="conunt" value="1" min="1"/></span>
  68.                 <span>￥2299.00</span>
  69.                 <span>
  70.                     <a href="">删除</a>
  71.                 </span>
  72.             </div>
  73.             <div class="cart-infos">
  74.                 <span><input type="checkbox" name="select" checked></span>
  75.                 <span class="pic-infos">
  76.                     <a href=""><img src="../../static/images/bx1.jpg" alt=""></a>
  77.                     <a href="">海尔出品Leader/统帅 BCD-335WLDPC法式多门风冷无霜节能冰箱家用</a>
  78.                 </span>
  79.                 <span>￥3099.00</span>
  80.                 <span><input type="number" name="conunt" value="1" min="1"/></span>
  81.                 <span>￥3099.00</span>
  82.                 <span>
  83.                     <a href="">删除</a>
  84.                 </span>
  85.             </div>
  86.         </div>
  87.         <div class="cart-bottom">
  88.             <span>数量：3</span>
  89.             <span>合计：<i>￥5686</i></span>
  90.             <button>去结算</button>
  91.         </div>
  94. </div>
  95. <!--导入底部组件-->
  96. <footer class="public-footer">
  97.     <div>
  98.         <a href="">简介</a>
  99.         <a href="">联系我们</a>
  100.         <a href="">招聘信息</a>
  101.         <a href="">友情链接</a>
  102.         <a href="">用户服务协议</a>
  103.         <a href="">隐私权声明</a>
  104.         <a href="">法律投诉声明</a>
  105.     </div>
  106.     <div><span>LOGO</span></div>
  107.     <div>
  108.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  109.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  110.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  111.     </div>
  112.     <div>
  113.         <p>关注公众号</p>
  114.         <img src="../../static/images/erwei-code.png" alt="">
  115.     </div>
  116. </footer>
  117. </body>
  118. </html>

css部分

  1. @import "../public_reset.css";
  2. @import "../public_head/public_head.css";
  3. @import "../public_footer/public_footer.css";
  5. .shop-cart>.content{
  6.     /*设置主体为1200px,居中对齐，背景为白色*/
  7.     width: 1200px;
  8.     margin: 20px auto;
  9.     padding:20px;
  10.     background: white;
  11. }
  12. .shop-cart>.content>.cart-num{
  13.     display: flex;
  14.     justify-content: space-between;
  15.     margin: 20px 0;
  16.     border-bottom: 2px solid #e6e6e6;
  17.     line-height: 50px;
  18. }
  19. .shop-cart>.content>.cart-num>span{
  20.     font-size: 16px;
  21.     color: #f60;
  22. }
  23. .shop-cart>.content>.cart-top{
  24.     display: flex;
  25.     justify-content: space-around;
  26.     height: 40px;
  27.     align-items: center;
  28. }
  29. .shop-cart>.content>.cart-list{
  30.     margin: 30px 0;
  31. }
  32. .shop-cart>.content>.cart-list>.cart-infos{
  33.     display: flex;
  34.     justify-content: space-around;
  35.     align-items: center;
  36.     height: 100px;
  38. }
  39. .shop-cart>.content>.cart-list>.cart-infos:hover{
  40.     background:wheat;
  41. }
  42. .shop-cart>.content>.cart-list>.cart-infos>.pic-infos{
  43.     width: 280px;
  44.     display: flex;
  45.     align-items: center;
  47. }
  48. .shop-cart>.content>.cart-list>.cart-infos>.pic-infos>a:hover{
  49.     color: #f60;
  50. }
  52. .shop-cart>.content>.cart-list>.cart-infos>.pic-infos img{
  53.     width: 60px;
  54.     height: 60px;
  55.     margin-right: 10px;
  56. }
  57. .shop-cart>.content>.cart-list>.cart-infos>:nth-of-type(4) input{
  58.     width: 40px;
  59. }
  60. .shop-cart>.content>.cart-list>.cart-infos>:nth-of-type(1){
  61.     position: relative;
  62.     left: 20px;
  63. }
  64. .shop-cart>.content>.cart-list>.cart-infos>:nth-of-type(2){
  65.     position: relative;
  66.     left: -30px;
  67. }
  68. .shop-cart>.content>.cart-list>.cart-infos>:nth-of-type(3){
  69.     position: relative;
  70.     left: -100px;}
  71. .shop-cart>.content>.cart-list>.cart-infos>:nth-of-type(4){
  72.     position: relative;
  73.     left: -75px;}
  74. .shop-cart>.content>.cart-list>.cart-infos>:nth-last-of-type(2){
  75.     position: relative;
  76.     left: -55px;}
  77. .shop-cart>.content>.cart-list>.cart-infos>:last-of-type{
  78.     position: relative;
  79.     left: -22px;}
  80. .shop-cart>.content>.cart-bottom{
  81.     display: flex;
  82.     justify-content: end;
  83.     align-items: center;
  84. }
  85. .shop-cart>.content>.cart-bottom>:not(:last-child){
  86.     width:195px  ;
  87. }
  88. .shop-cart>.content>.cart-bottom>span>i{
  89.     color: red;
  90.     font-size: 16px;
  91.     font-style: normal;
  92. }
  93. .shop-cart>.content>.cart-bottom>:last-child{
  94.     width: 120px;
  95.     height: 40px;
  96.     border:none;
  97.     background: red;
  98.     color: white;
  99.     cursor: pointer;
  100.     font-size: 16px;
  101. }
  102. .shop-cart>.content>.cart-bottom>:last-child:hover{
  103.     background: #178cee;
  104. }

整体效果展示

2.结算页

作业要求：商城购物车有收货地址和提交按钮。

2.1 对防的结算页面，去掉不需要部分将其分为了七部分。也用到一个容器（content）将全部内容包裹，让整体水平居中显示。

2.2 第二部分信息地址部分，用的无序列表，让容器转为flex后，再对里面每一个地址栏在进行转为flex容器，里面的内容为垂直显示，水平项目的对齐方式为分散。

2.3 第四部分和第五部分，沿用了购物车的思想来实现。第六部分实现，让一个区块靠右对齐，再转为flex容器，让主轴方向为垂直分散对齐，交叉轴为靠右对齐。

html代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>结算页面</title>
  6.     <!--导入当前组件css样式表-->
  7.     <link rel="stylesheet" href="shop_settlement.css">
  8. </head>
  9. <body>
  10. <!--导入头部组件-->
  11. <div class="public-head">
  12.     <a href="">网站首页</a>
  13.     <a href="">专题</a>
  14.     <a href="">网站导航</a>
  15.     <a href="">二手商品</a>
  16.     <a href="">讨论区</a>
  17.     <span>
  18.          <a href=""><i class="iconfont icon-huiyuan2"></i> 登陆</a>
  19.          <a href="">免费注册</a>
  20.      </span>
  21. </div>
  22. <div class="shop-settlenment">
  23.     <div class="content">
  24.         <h5>收货地址</h5>
  25.          <!--收货地址-->
  26.          <div class="shop-address">
  27.              <ul>
  28.                  <li class="select">
  29.                      <span>重庆（张先生收）</span>
  30.                      <p>重庆渝中区大溪沟人和街华福巷大厦1F（靠大礼堂300米）</p>
  31.                      <a href="">修改</a>
  32.                  </li>
  33.                  <li>
  34.                      <span>四川（张先生收）</span>
  35.                      <p>重庆市渝中区邹容路100号重庆时代广场B2</p>
  36.                  </li>
  37.                  <li>
  38.                      <span>重庆（张先生收）</span>
  39.                      <p>重庆渝中区大溪沟人和街华福巷大厦1F（靠大礼堂300米）</p>
  40.                  </li>
  41.                  <li>
  42.                      <span>四川（张先生收）</span>
  43.                      <p>重庆市渝中区邹容路100号重庆时代广场B2</p>
  44.                  </li>
  45.              </ul>
  46.          </div>
  47.          <!--订单信息-->
  48.         <h5>确认订单信息</h5>
  49.         <div class="cart-top">
  50.             <span>商品信息</span>
  51.             <span>单价</span>
  52.             <span>数量</span>
  53.             <span>金额</span>
  54.         </div>
  55.          <div class="settlenment-infos">
  56.              <div class="cart-infos">
  57.                  <span class="pic-infos">
  58.                     <a href=""><img src="../../static/images/lbx.jpg" alt=""></a>
  59.                     <a href="">买2送1七天量】黄金搭档中老年型多种复合维生素片年货礼盒保健品</a>
  60.                 </span>
  61.                  <span>￥288.00</span>
  62.                  <span>1</span>
  63.                  <span>￥288.00</span>
  64.              </div>
  65.              <div class="cart-infos">
  66.                  <span class="pic-infos">
  67.                     <a href=""><img src="../../static/images/bx.jpg" alt=""></a>
  68.                     <a href="">海尔出品Leader/统帅 BC/BD-427TD 427升大容量商用冷藏冷冻冰柜</a>
  69.                 </span>
  70.                  <span>￥2299.00</span>
  71.                  <span>1</span>
  72.                  <span>￥2299.00</span>
  73.              </div>
  74.              <div class="cart-infos">
  75.                  <span class="pic-infos">
  76.                     <a href=""><img src="../../static/images/bx1.jpg" alt=""></a>
  77.                     <a href="">海尔出品Leader/统帅 BCD-335WLDPC法式多门风冷无霜节能冰箱家用</a>
  78.                 </span>
  79.                  <span>￥3099.00</span>
  80.                  <span>1</span>
  81.                  <span>￥3099.00</span>
  82.              </div>
  83.          </div>
  84.         <!--用户确定信息-->
  85.         <div class="shop—certain">
  86.             <span>实付款：¥<i>5686.00</i></span>
  87.             <span>寄送至： 重庆渝中区大溪沟人和街华福巷大厦1F（靠大礼堂300米）</span>
  88.             <span>收货人：张先生 13xxxxx45219</span>
  89.         </div>
  90.          <button>提交订单</button>
  92.     </div>
  93.     <!--导入底部组件-->
  94.     <footer class="public-footer">
  95.         <div>
  96.             <a href="">简介</a>
  97.             <a href="">联系我们</a>
  98.             <a href="">招聘信息</a>
  99.             <a href="">友情链接</a>
  100.             <a href="">用户服务协议</a>
  101.             <a href="">隐私权声明</a>
  102.             <a href="">法律投诉声明</a>
  103.         </div>
  104.         <div><span>LOGO</span></div>
  105.         <div>
  106.             <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  107.             <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  108.             <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  109.         </div>
  110.         <div>
  111.             <p>关注公众号</p>
  112.             <img src="../../static/images/erwei-code.png" alt="">
  113.         </div>
  114.     </footer>
  115. </div>
  116. </body>
  117. </html>

css部分

  1. /*导入样式重置文档*/
  2. @import "../public_reset.css";
  3. @import "../public_head/public_head.css";
  4. @import "../public_footer/public_footer.css";
  6. .shop-settlenment>.content{
  7.     /*设置主体为1200px,居中对齐，背景为白色*/
  8.     width: 1200px;
  9.     margin: 20px auto;
  10.     padding:20px;
  11.     box-sizing: border-box;
  12.     background: white;
  13.     /*将容器转为flex容器*/
  14.     display: flex;
  15.     /*主轴方向为垂直方向*/
  16.     flex-direction: column;
  17. }
  18. .shop-settlenment>.content h5{
  19.     font-size: 14px;
  20.     color:#333;
  21.     line-height: 40px;
  22. }
  23. .shop-settlenment>.content>.shop-address>ul{
  24.     /*将容器转为flex容器*/
  25.     display: flex;
  27. }
  28. .shop-settlenment>.content>.shop-address>ul>li{
  30.     width: 237px;
  31.     height: 106px;
  32.     padding: 10px 15px;
  33.     margin-right: 14px;
  34.     margin-bottom: 14px;
  35.     box-sizing: border-box;
  36.     /*设置收货地址背景图*/
  37.     background-image: url("../../static/images/shop/default.png");
  38.     /*将容器转为flex容器*/
  39.     display: flex;
  40.     flex-direction: column;
  41.     justify-content: space-around;
  42. }
  44. .shop-settlenment>.content>.shop-address>ul>li:hover,.shop-settlenment>.content>.shop-address>ul>li.select{
  45.     /*设置选中收货地址背景图*/
  46.     background-image: url("../../static/images/shop/hover.png");
  47. }
  48. .shop-settlenment>.content>.shop-address>ul>li.select>a{
  49.     color:#c97;
  50. }
  51. .shop-settlenment>.content>.shop-address>ul>li>span{
  52.     /*设置底边框线*/
  53.     border-bottom: 1px solid #f2f2f2;
  54.     line-height: 30px;
  56. }
  57. .shop-settlenment>.content>.cart-top{
  59.     display: flex;
  60.     justify-content: space-around;
  61.     border-bottom: 1px solid #f2f2f2;
  62.     align-items: center;
  63.     height: 40px;
  65. }
  66. .shop-settlenment>.content>.settlenment-infos{
  68.     display: flex;
  69.     /*设置主轴的方向*/
  70.     flex-direction: column;
  71.     justify-content: space-around;
  73. }
  74. .shop-settlenment>.content>.settlenment-infos>.cart-infos{
  75.     margin-top: 20px;
  76.     height: 100px;
  77.     display: flex;
  78.     justify-content: space-around;
  79.     align-items: center;
  80. }
  82. .shop-settlenment>.content>.settlenment-infos>.cart-infos>.pic-infos{
  83.     width:280px;
  84.     display: flex;
  85.     align-items: center;
  87. }
  88. .shop-settlenment>.content>.settlenment-infos>.cart-infos>.pic-infos>a:hover{
  89.     color: #ff0000;
  90. }
  91. .shop-settlenment>.content>.settlenment-infos>.cart-infos>.pic-infos img{
  92.     width: 60px;
  93.     height: 60px;
  94.     margin-right: 10px;
  95. }
  96. .shop-settlenment>.content>.settlenment-infos>.cart-infos>:nth-of-type(1){
  97.     position: relative;
  98.     left: -50px;
  99. }
  100. .shop-settlenment>.content>.settlenment-infos>.cart-infos>:nth-of-type(2){
  101.     position: relative;
  102.     left: -150px;
  103. }
  104. .shop-settlenment>.content>.settlenment-infos>.cart-infos>:nth-of-type(3){
  105.     position: relative;
  106.     left: -80px;
  107. }
  108. .shop-settlenment>.content>.settlenment-infos>.cart-infos>:nth-of-type(4){
  109.     position: relative;
  110.     left: -20px;
  111. }
  112. .shop-settlenment>.content>.shop—certain{
  113.     /*设置确定信息的边框线*/
  114.     border:1px solid #ff0036;
  115.     width: 320px;
  116.     padding: 10px;
  117.     height: 80px;
  118.     /*靠右对齐*/
  119.     margin-left: auto;
  120.     /*转为flex容器*/
  121.     display: flex;
  122.     /*主轴水平方向*/
  123.     flex-direction: column;
  124.     /*主轴分散对齐*/
  125.     justify-content: space-around;
  126.     /*交叉轴靠右对齐*/
  127.      align-items: end;
  128. }
  129. .shop-settlenment>.content>.shop—certain>span>i{
  130.     font-size: 26px;
  131.     color:#ff0036;
  132. }
  133. .shop-settlenment>.content>button{
  134.     /*去掉边框*/
  135.     border: none;
  136.     width: 180px;
  137.     height: 40px;
  138.     /*字体样式*/
  139.     color:#f2f2f2;
  140.     background: #ff0036;
  141.     align-self: end;
  142. }
  143. .shop-settlenment>.content>button:hover{
  144.     background: #f60;
  145. }

知识小结：

1.flex容器单行垂直方向对齐用align-items，多行容器用align-content，水平方向对齐只有一个justift-content属性。
2.flex虽然是一维，在细节处理非常棒。简单轻松实现了水平垂直居中的效果，是传统布局不能轻易实现的。
3.构造dom布局的时候，考虑的不是很全面。不知道怎么划分比较合适，思路上还有欠缺。例如结算页，写完发现，第一部分可以和第二部分合并成一个区块，第三也可以和第四合并在一起。什么时候用flex好，什么时候用grid，还是迷糊中。怎么构造源代码结构，最让人头疼的地方。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：页面的样式写得非常酷
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post