search

博客列表 >第十期商城购物车和结算页面实战（2019-12-31）

第十期商城购物车和结算页面实战（2019-12-31）

齐齐
齐齐原创
2020年01月04日 16:11:37865浏览

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，还是迷糊中。怎么构造源代码结构，最让人头疼的地方。

上一条：购物车实例页面写法（仿京东商城）--PHP中文网线上培训十期0101下一条：2020年01月03日 php基础、变量定义及输出
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多