Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 商城购物车页面与结算页面实战----PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22278
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
商城购物车页面与结算页面实战----PHP培训十期线上班
Miss灬懒虫
Original
1216 people have browsed it

商城购物车页面与结算页面实战

概述与编写感受

本次实战通过组件的形式，实现购物车与结算页面。在这其中我们用到了大量的flex和少量grid，有个别页面在写的过程中发现，要是不能对页面模型进行很好的布局拆分的话，使用单一的flex或grid感觉代码量是真心的多，所以要想做一个好的前端，对页面布局的合理分析与规划还是十分重要的。

项目思路

首先，将两个页面拆分出公共部分，也就是后面用到的 公共头部、公共底部，还有公用的“标签重置样式表”。
然后，将两个页面的主体进行拆分为三个部分，分别是“头部”、“商品列表”和“金额结算”，其中结算页会有单独的“邮寄信息”部分，
最后针对不同的组件进行编写，然后整体页面拼装就可以了。

“public_footer”组件，使用了grid；

“shop_payinfo”组件，其中的内容布局分别使用了flex和grid实现布局，代码量的对比很明显；

“shop_cart_list”组件，在整个页面的占比是最大的，我个人是用的flex进行布局的，但是感觉整个方法有点笨，也许grid会好一点，静待博友优良的解决方案哦！

后面是实战内容，请各位看官多提意见哦！大家共同成长！

页面效果

购物车

结算页

目录结构

项目组件

为了便于页面重复性内容的利用，我们采用组件式开发，最后针对性的对完成的组件进行合理的拼接和布局，得到我们想要的页面。

公共组件

  • 公共组件
  1. public_header.html和public_header.css（头部）
  2. public_footer.html和public_footer.css（底部）
  3. public_reset.css(格式重置样式表)
  • 商城组件
  1. shop_cart_headline.html和shop_cart_headline.css（二级标题）
  2. shop_cart_list.html和shop_cart_list.css(商品列表)
  3. shop_cart_pay.html和shop_cart_pay.css（购物车页面合计）
  4. shop_pay.html和shop_pay.css（结算支付页面合计）
  5. shop_payinfo.html和shop_payinfo.css(结算页支付信息)

头部 public_header

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全站页面头部</title>
  6.     <link rel="stylesheet" href="css/public_header.css">
  7. </head>
  8. <body>
  9. <div class="public-header">
  10.     <a href="">网站首页</a>
  11.     <a href="">专题</a>
  12.     <a href="">网站导航</a>
  13.     <a href="">二手商品</a>
  14.     <a href="">讨论区</a>
  15.     <span>
  16.         <a href=""><i class="iconfont"></i>登录</a>
  17.         <a href="">免费注册</a>
  18.     </span>
  19. </div>
  20. </body>
  21. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "public_reset.css";
  4. /*头部*/
  5. .public-header{
  6.     height: 44px;
  7.     background-color: black;
  8.     padding: 0 20px;
  10.     /*转化为弹性盒子容器*/
  11.     display: flex;
  12.     flex-flow: row nowrap;
  13. }
  14. /*统一设置容器下的 a 标签项目*/
  15. .public-header >a{
  16.     line-height: 44px;
  17.     text-align: center;
  18.     padding: 0 10px;
  19.     color: #cccccc;
  20. }
  21. .public-header >a:hover{
  22.     background-color: #fff;
  23.     color: black;
  24.     font-weight: bold;
  25. }
  27. /*头部右侧内容 right*/
  28. .public-header >span{
  29.     line-height: 44px;
  30.     text-align: center;
  31.     margin-left: auto;
  32. }
  33. .public-header >span a{
  34.     color: #cccccc;
  35.     padding: 0 10px;
  36. }
  37. /*设置右侧登录图标*/
  38. .public-header >span a i{
  39.     font-size: 16px;
  40.     color: #cccccc;
  41.     padding-right: 10px;
  42. }

底部 public_footer

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共底部</title>
  6.     <link rel="stylesheet" href="css/public_footer.css">
  7. </head>
  8. <body>
  9. <!--页尾版权公共组件-->
  10. <div class="public-footer">
  11.     <!--背景色容器-->
  12.     <div class="footer-container">
  13.         <!--页尾顶部链接-->
  14.         <div class="footer-links">
  15.             <a href="">简介</a>
  16.             <a href="">联系我们</a>
  17.             <a href="">招聘信息</a>
  18.             <a href="">友情链接</a>
  19.             <a href="">用户服务协议</a>
  20.             <a href="">隐私权声明</a>
  21.             <a href="">法律投诉声明</a>
  22.         </div>
  23.         <!--页尾左侧 logo-->
  24.         <span class="footer-logo">LOGO</span>
  25.         <!--页尾版权内容-->
  26.         <div class="footer-copyright">
  27.             <span>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</span>
  28.             <span>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</span>
  29.             <span>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</span>
  30.         </div>
  31.         <!--公众号二维码-->
  32.         <div class="footer-QrCode">
  33.             <div class="footer-QrCode-content">
  34.                 <span>关注公众号</span>
  35.                 <img class="" src="../../images/erwei-code.png" alt="">
  36.             </div>
  37.         </div>
  38.     </div>
  39. </div>
  40. </body>
  41. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "public_reset.css";
  4. /*footer页面样式*/
  6. /*页面参考线
  7. *:not(body){
  8.     outline: 1px dashed royalblue;
  9. }*/
  11. /*底部组件背景色-容器*/
  12. .public-footer{
  13.     width: 100%;
  14.     height: 250px;
  15.     background-color: #282c31;
  16.     color: #959ba2;
  17. }
  18. /*页尾主体内容 gird 网格*/
  19. .public-footer>.footer-container{
  20.     width: 880px;
  21.     height: 150px;
  22.     margin: 0 auto;
  23.     padding-top: 20px;
  24.     /*转换为Grid网格布局*/
  25.     display: grid;
  26.     grid-template-columns: 130px 540px 240px;
  27.     grid-template-rows: 40px  110px;
  29.     grid-template-areas: 'links links QrCode'
  30.     'logo copyright QrCode';
  31. }
  33. /*页尾版权 头部链接*/
  34. .public-footer>.footer-container>.footer-links{
  35.     grid-area: links;
  36.     width: 630px;
  37.     height: 40px;
  38.     display: flex;
  39.     flex-flow: row nowrap;
  40.     justify-content: space-around;
  41.     justify-items: center;
  42.     align-items: center;
  43. }
  44. .public-footer>.footer-container>.footer-links>a{
  45.     width: 80px;
  46.     height: 40px;
  47.     line-height: 40px;
  48.     text-align: center;
  49.     color: #959ba2;
  50. }
  51. .public-footer>.footer-container>.footer-links>a:hover{
  52.     cursor: pointer;
  53.     color: #178cee;
  54.     font-weight: bold;
  55. }
  57. /*左侧logo*/
  58. .public-footer>.footer-container>.footer-logo{
  59.     grid-area: logo;
  60.     font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
  61.     font-size: 30px;
  62.     place-self: center;
  63. }
  65. /*页尾版权内容*/
  66. .public-footer>.footer-container>.footer-copyright{
  67.     grid-area: copyright;
  68.     display: flex;
  69.     flex-flow: column nowrap;
  70.     justify-content: space-around;
  71. }
  72. .public-footer>.footer-container>.footer-copyright>span{
  73.     width: 100%;
  74.     height: 30px;
  75.     line-height: 30px;
  76.     text-align: left;
  77. }
  79. /*页尾二维码*/
  80. .public-footer>.footer-container>.footer-QrCode{
  81.     grid-area: QrCode;
  82.     width: 240px;
  83.     height: 200px;
  84.     /*设置黑色边框线*/
  85.     border-left: 1px solid black;
  86. }
  87. .public-footer>.footer-container>.footer-QrCode>.footer-QrCode-content{
  88.     width: 110px;
  89.     margin-left: 30px;
  90.     display: flex;
  91.     flex-flow: column nowrap;
  92. }
  93. .public-footer>.footer-container>.footer-QrCode>.footer-QrCode-content>span{
  94.     width: 110px;
  95.     height: 40px;
  96.     line-height: 40px;
  97.     text-align: center;
  98. }
  99. .public-footer>.footer-container>.footer-QrCode>.footer-QrCode-content>img{
  100.     width: 110px;
  101.     height: 110px;
  102. }

购物页面二级标题shop_cart_headline

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_headline.css">
  7. </head>
  8. <body>
  9. <div class="shop-cart-headline-back">
  10.     <div class="shop-cart-headline">
  11.         <a href="">
  12.             <img src="../../images/logo.png" alt="">
  13.             <span>购物车</span>
  14.         </a>
  15.         <div class="cart-search">
  16.             <input type="search" id="search" name="search">
  17.             <label for="search">搜索</label>
  18.         </div>
  19.     </div>
  20. </div>
  21. </body>
  22. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "../public/css/public_reset.css";
  4. /*单页参考线*/
  5. /* *:not(body){ outline: 1px dashed red; }*/
  7. /*背景色DIV 样式*/
  8. .shop-cart-headline-back{
  9.     width: 100%;
  10.     height: 100px;
  11.     background-color: white;
  12. }
  13. /*最外层 flex弹性盒子设置*/
  14. .shop-cart-headline-back>.cart-headline{
  15.     width: 1200px;
  16.     height: 100px;
  17.     margin: 0 auto;
  18.     /*转换为flex 弹性盒子*/
  19.     display: flex;
  20.     flex-flow: row nowrap;
  21.     justify-content: space-between;
  22.     align-items: center;
  23. }
  25. /*左侧logo*/
  26. .shop-cart-headline-back>.cart-headline>a{
  27.     width: 240px;
  28.     height: 76px;
  29.     display: flex;
  30.     flex-flow: row nowrap;
  31.     justify-content: center;
  32. }
  33. .shop-cart-headline-back>.cart-headline>a>span{
  34.     width: 76px;
  35.     height: 36px;
  36.     font-size: 20px;
  37.     color: #888888;
  38.     line-height: 36px;
  39.     font-style: italic;
  40.     font-weight: bold;
  41.     margin-bottom: 10px;
  42.     align-self: end;
  43. }
  44. .shop-cart-headline-back>.cart-headline>a:hover{
  45.     cursor: pointer;
  46. }
  48. /*右侧搜索框*/
  49. .shop-cart-headline-back>.cart-headline>.cart-search{
  50.     width: 280px;
  51.     height: 30px;
  52.     border: 2px solid #178cee;
  53.     display: flex;
  55.     /*转换 flex弹性盒子*/
  56.     flex-flow: row nowrap;
  57.     justify-content: space-between;
  58.     align-items: center;
  59. }
  60. .shop-cart-headline-back>.cart-headline>.cart-search:hover{
  61.     box-shadow: 0 0 5px #888888;
  62. }
  63. .shop-cart-headline-back>.cart-headline>.cart-search>input{
  64.     width: 220px;
  65.     height: 30px;
  66.     /*去掉原始边框样式*/
  67.     border: none;
  68. }
  69. .shop-cart-headline-back>.cart-headline>.cart-search>label{
  70.     width: 60px;
  71.     height: 30px;
  72.     line-height: 30px;
  73.     text-align: center;
  74.     background-color: #178cee;
  75.     color: #ffffff;
  76. }

支付信息（邮寄） shop_payinfo

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>支付结算信息组件</title>
  6.     <link rel="stylesheet" href="shop_payinfo.css">
  7.     <style>
  9.     </style>
  10. </head>
  11. <body>
  12. <!--支付结算信息组件-->
  13. <div class="shop-pay">
  14.     <!--支付结算信息-->
  15.     <div class="pay-info">
  16.         <!--邮寄地址信息-->
  17.         <div class="address">
  18.             <div class="address-header">
  19.                 <span>邮寄信息</span>
  20.                 <button>更多地址</button>
  21.                 <button>新增地址</button>
  22.             </div>
  23.             <div class="address-check">
  24.                 <span>张小帅</span>
  25.                 <span>北京市朝阳区广渠东路18号，狗肉馆前台</span>
  26.                 <span>17****36859</span>
  27.                 <span>默认地址</span>
  28.             </div>
  29.         </div>
  30.         <!--支付方式-->
  31.         <div class="pay-mode">
  32.             <span>支付方式</span>
  33.             <span>在线支付</span>
  34.             <span>货到付款</span>
  35.             <span><a href="">更多>></a></span>
  36.         </div>
  37.     </div>
  38. </div>
  39. </body>
  40. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "../public/css/public_reset.css";
  4. /*单页参考线*/
  5. /**:not(body){ outline: 1px dashed;}*/
  7. /*购物车结算信息组件*/
  8. .shop-pay{
  9.     width: 100%;
  10.     margin: 0 auto;
  11. }
  12. .shop-pay>.pay-info{
  13.     width: 1200px;
  14.     background-color: white;
  15.     display: flex;
  16.     margin: 20px auto;
  17.     flex-flow: column nowrap;
  18. }
  19. /*邮寄信息*/
  20. .shop-pay>.pay-info>.address{
  21.     height: 100px;
  22.     border: 1px solid #f1f1f1;
  23.     margin-bottom: 15px;
  24.     display: flex;
  25.     flex-flow: column nowrap;
  26.     justify-content: space-around;
  27. }
  28. .shop-pay>.pay-info>.address>.address-header{
  29.     height: 40px;
  30.     line-height: 40px;
  31.     text-align: left;
  32. }
  33. .shop-pay>.pay-info>.address>.address-header>span{
  34.     font-size: 16px;
  35.     color: #333333;
  36.     font-weight: bolder;
  37.     margin-left: 20px;
  38. }
  39. .shop-pay>.pay-info>.address>.address-header>button{
  40.     width: 80px;
  41.     height: 28px;
  42.     color: white;
  43.     border-radius: 5px;
  44.     background-color: #178cee;
  45.     border: none;
  46. }
  47. .shop-pay>.pay-info>.address>.address-header>button:first-of-type{
  48.     margin-left: 200px;
  49. }
  50. .shop-pay>.pay-info>.address>.address-header>button:first-of-type:hover{
  51.     font-weight: bolder;
  52.     background-color: #f64c59;
  53.     cursor: pointer;
  54. }
  55. .shop-pay>.pay-info>.address>.address-header>button:last-of-type{
  56.     margin-left: 50px;
  57. }
  58. .shop-pay>.pay-info>.address>.address-header>button:last-of-type:hover{
  59.     cursor: pointer;
  60.     font-weight: bolder;
  61.     background-color: #f64c59;
  62.     box-shadow: 0 0 5px #888888;
  63. }
  64. /*显示地址信息*/
  65. .shop-pay>.pay-info>.address>.address-check{
  66.     height: 30px;
  67.     line-height: 30px;
  68.     display: flex;
  69.     flex-flow: row nowrap;
  70. }
  71. .shop-pay>.pay-info>.address>.address-check>span{
  72.     margin-left: 20px;
  73. }
  74. .shop-pay>.pay-info>.address>.address-check>span:first-of-type{
  75.     font-weight: bolder;
  76.     margin-left: 60px;
  77. }
  78. .shop-pay>.pay-info>.address>.address-check>span:last-of-type{
  79.     width: 80px;
  80.     height: 30px;
  81.     text-align: center;
  82.     color: white;
  83.     background-color: #aaaaaa;
  84. }
  86. /*支付方式*/
  87. .shop-pay>.pay-info>.pay-mode{
  88.     width: 100px;
  89.     padding-bottom: 15px;
  90.     display: grid;
  91.     grid-template-columns: repeat(3,160px) ;
  92.     grid-template-rows: repeat(2,40px);
  93. }
  94. .shop-pay>.pay-info>.pay-mode>span:first-of-type{
  95.     grid-column: 1/4;
  96.     grid-row: 1/2;
  97.     font-size: 16px;
  98.     color: #333333;
  99.     font-weight: bolder;
  100.     margin-left: 20px;
  101. }
  102. .shop-pay>.pay-info>.pay-mode>span:nth-child(2){
  103.     grid-column: 1/2;
  104.     grid-row: 2/3;
  105.     width: 80px;
  106.     height: 30px;
  107.     line-height: 30px;
  108.     text-align: center;
  109.     border: 2px solid #f64c59;
  110.     margin-left: 60px;
  111. }
  112. .shop-pay>.pay-info>.pay-mode>span:nth-child(3){
  113.     grid-column: 2/3;
  114.     grid-row: 2/3;
  115.     width: 80px;
  116.     height: 30px;
  117.     line-height: 30px;
  118.     text-align: center;
  119.     border: 2px solid #aaaaaa;
  120. }
  121. .shop-pay>.pay-info>.pay-mode>span:nth-child(4){
  122.     grid-column: 3/4;
  123.     grid-row: 2/3;
  124.     align-self: center;
  125. }

商品列表 shop_cart_list

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_list.css">
  7. </head>
  8. <body>
  9. <!--购物车商品列表组件-->
  10. <div class="shop-cart-list">
  11.     <!--商品列表-->
  12.     <div class="list-container">
  13.         <span>全部商品</span>
  14.         <!--标题栏-->
  15.         <div class="list-title">
  16.             <span class="checkbox-all">
  17.                 <input type="checkbox" id="checkbox-all" name="checkbox-all">
  18.                 <label for="checkbox-all">全选</label>
  19.             </span>
  20.             <span>商品</span>
  21.             <span>单价</span>
  22.             <span>数量</span>
  23.             <span>小计</span>
  24.             <span>操作</span>
  25.         </div>
  26.         <!--供应商-自营-->
  27.         <div class="supplier">
  28.             <div class="supplier-checkbox">
  29.                 <input type="checkbox" id="supplier-checkbox" name="supplier-checkbox">
  30.                 <label for="supplier-checkbox">商城自营</label>
  31.             </div>
  32.             <!--单件商品描述-->
  33.             <div class="goods">
  34.                 <!--商品勾选-->
  35.                 <div class="goods-checkbox">
  36.                     <input type="checkbox" id="goods-checkbox-1" name="goods-checkbox-1">
  37.                     <label for="goods-checkbox-1"></label>
  38.                 </div>
  39.                 <!--商品图片-->
  40.                 <a href=""><img src="../../images/shop/Mate30.jpg" alt=""></a>
  41.                 <!--商品描述-->
  42.                 <div class="goods-describe">
  43.                     <a href=""><span>华为 HUAWEI Mate30 Pro 5G 麒麟990 OLED环屏幕双4000万徕卡四摄</span></a>
  44.                     <div>
  45.                         <p>丹霞橙</p>
  46.                         <p>8GB+256GB</p>
  47.                     </div>
  48.                 </div>
  49.                 <!--商品单价-->
  50.                 <span class="goods-price">¥6899.00</span>
  51.                 <!--商品数量-->
  52.                 <div class="goods-number">
  53.                     <input type="number" id="goods-number-1" name="goods-number-1" value="1">
  54.                     <label for="goods-number-1"></label>
  55.                 </div>
  56.                 <!--商品小计-->
  57.                 <span class="goods-total">¥6899.00</span>
  58.                 <!--删除商品-->
  59.                 <div class="goods-handle">
  60.                     <a href="">删除</a>
  61.                     <a href="">到货通知</a>
  62.                 </div>
  63.             </div>
  64.             <div class="goods">
  65.                 <!--商品勾选-->
  66.                 <div class="goods-checkbox">
  67.                     <input type="checkbox" id="goods-checkbox-2" name="goods-checkbox">
  68.                     <label for="goods-checkbox-2"></label>
  69.                 </div>
  70.                 <!--商品图片-->
  71.                 <a href=""><img src="../../images/shop/Mate30.jpg" alt=""></a>
  72.                 <!--商品描述-->
  73.                 <div class="goods-describe">
  74.                     <a href=""><span>华为 HUAWEI Mate30 Pro 5G 麒麟990 OLED环屏幕双4000万徕卡四摄</span></a>
  75.                     <div>
  76.                         <p>丹霞橙</p>
  77.                         <p>8GB+256GB</p>
  78.                     </div>
  79.                 </div>
  80.                 <!--商品单价-->
  81.                 <span class="goods-price">¥6899.00</span>
  82.                 <!--商品数量-->
  83.                 <div class="goods-number">
  84.                     <input type="number" id="goods-number-2" name="goods-number-2" value="1">
  85.                     <label for="goods-number-2"></label>
  86.                 </div>
  87.                 <!--商品小计-->
  88.                 <span class="goods-total">¥6899.00</span>
  89.                 <!--删除商品-->
  90.                 <div class="goods-handle">
  91.                     <a href="">删除</a>
  92.                     <a href="">到货通知</a>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <!--供应商-电脑专卖店-->
  97.         <div class="supplier">
  98.             <div class="supplier-checkbox">
  99.                 <input type="checkbox" id="supplier-checkbox-1" name="supplier-checkbox-1">
  100.                 <label for="supplier-checkbox-1">电子产品专卖店</label>
  101.             </div>
  102.             <!--单件商品描述-->
  103.             <div class="goods">
  104.                 <!--商品勾选-->
  105.                 <div class="goods-checkbox">
  106.                     <input type="checkbox" id="goods-checkbox-z1" name="goods-checkbox-z1">
  107.                     <label for="goods-checkbox-z1"></label>
  108.                 </div>
  109.                 <!--商品图片-->
  110.                 <a href=""><img src="../../images/shop/Mate30.jpg" alt=""></a>
  111.                 <!--商品描述-->
  112.                 <div class="goods-describe">
  113.                     <a href=""><span>华为 HUAWEI Mate30 Pro 5G 麒麟990 OLED环屏幕双4000万徕卡四摄</span></a>
  114.                     <div>
  115.                         <p>丹霞橙</p>
  116.                         <p>8GB+256GB</p>
  117.                     </div>
  118.                 </div>
  119.                 <!--商品单价-->
  120.                 <span class="goods-price">¥6899.00</span>
  121.                 <!--商品数量-->
  122.                 <div class="goods-number">
  123.                     <input type="number" id="goods-number-z1" name="goods-number-z1" value="1">
  124.                     <label for="goods-number-z1"></label>
  125.                 </div>
  126.                 <!--商品小计-->
  127.                 <span class="goods-total">¥6899.00</span>
  128.                 <!--删除商品-->
  129.                 <div class="goods-handle">
  130.                     <a href="">删除</a>
  131.                     <a href="">到货通知</a>
  132.                 </div>
  133.             </div>
  134.         </div>
  135.     </div>
  136. </div>
  137. </body>
  138. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "../public/css/public_reset.css";
  4. /*单页参考线*/
  5. /**:not(body){ outline: 1px dashed;}*/
  7. /*组件页--最外层DIV*/
  8. .shop-cart-list{
  9.     width: 100%;
  10.     margin: 20px 0;
  11. }
  12. .shop-cart-list>.list-container{
  13.     width: 1200px;
  14.     background-color: white;
  15.     color: #666666;
  16.     border: 1px solid #cccccc;
  17.     margin: 0 auto;
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20.     justify-content: space-around;
  21. }
  22. /*列表标题 -全部商品*/
  23. .shop-cart-list>.list-container>span:first-of-type{
  24.     width: 80px;
  25.     height: 40px;
  26.     line-height: 40px;
  27.     font-size: 16px;
  28.     font-weight: bold;
  29.     color: #f64c59;
  30.     text-align: center;
  31.     border-bottom: 1px solid #f64c59;
  32. }
  34. /*商品列表标题栏*/
  35. .shop-cart-list>.list-container>.list-title{
  36.     width: 1200px;
  37.     height: 32px;
  38.     background-color: #f3f3f3;
  39.     line-height: 32px;
  40.     text-align: center;
  41.     /*转网格*/
  42.     display: grid;
  43.     grid-template-rows: 32px;
  44.     grid-template-columns: 80px 600px 120px 150px 100px 150px;
  45. }
  46. .shop-cart-list>.list-container>.list-title>.checkbox-all{
  47.     justify-self: start;
  48.     margin-left: 10px;
  49. }
  50. .shop-cart-list>.list-container>.list-title>span:nth-child(2){
  51.     margin-left: 20px;
  52.     text-align: left;
  53. }
  55. /*店铺商品列表*/
  56. .shop-cart-list>.list-container>.supplier{
  57.     width: 100%;
  58.     height: auto;
  59.     margin-bottom: 26px;
  60.     display: flex;
  61.     flex-flow: column nowrap;
  62. }
  63. /*商铺商品-全选*/
  64. .shop-cart-list>.list-container>.supplier>.supplier-checkbox{
  65.     width: 98%;
  66.     height: 20px;
  67.     line-height: 20px;
  68.     text-align: left;
  69.     margin: 10px 0 0 10px;
  70.     border-bottom: 2px solid #aaa;
  71. }
  73. /*商品条目*/
  74. .shop-cart-list>.list-container>.supplier>.goods{
  75.     width: 100%;
  76.     height: 120px;
  77.     background-color: #fff4e8;
  78.     border-bottom: 1px solid #cccccc;
  79.     color: #333333;
  80.     display: flex;
  81.     flex-flow: row nowrap;
  82.     align-items: start;
  83. }
  84. /*商品勾选框*/
  85. .shop-cart-list>.list-container>.supplier>.goods>.goods-checkbox{
  86.     margin: 20px 10px 0 10px;
  87. }
  88. /*商品图片*/
  89. .shop-cart-list>.list-container>.supplier>.goods>a{
  90.     margin-top: 20px;
  91. }
  92. /*商品描述*/
  93. .shop-cart-list>.list-container>.supplier>.goods>.goods-describe{
  94.     height: 40px;
  95.     line-height: 20px;
  96.     text-align: left;
  97.     font-size: 14px;
  98.     margin: 20px 10px 0 10px;
  99.     display: flex;
  100.     flex-flow: row wrap;
  101. }
  102. .shop-cart-list>.list-container>.supplier>.goods>.goods-describe>a{
  103.     width: 210px;
  104. }
  105. .shop-cart-list>.list-container>.supplier>.goods>.goods-describe>div{
  106.     margin-left: 50px;
  107. }
  108. .shop-cart-list>.list-container>.supplier>.goods>.goods-describe>div>p {
  109.     color: #666666;
  110. }
  111. /*商品单价*/
  112. .shop-cart-list>.list-container>.supplier>.goods>.goods-price{
  113.     margin: 20px 0 0 250px ;
  114.     font-size: 16px;
  115.     font-weight: 200;
  116.     color: #333333;
  117. }
  118. /*商品数量*/
  119. .shop-cart-list>.list-container>.supplier>.goods>.goods-number{
  120.     width: 56px;
  121.     height: 20px;
  122.     margin: 20px 0 0 70px;
  123. }
  124. .shop-cart-list>.list-container>.supplier>.goods>.goods-number>input{
  125.     width: 56px;
  126.     height: 20px;
  127. }
  128. /*商品价格小计*/
  129. .shop-cart-list>.list-container>.supplier>.goods>.goods-total{
  130.     margin: 20px 0 0 70px ;
  131.     font-size: 16px;
  132.     font-weight: 300;
  133.     color: #333333;
  134. }
  135. /*商品删除操作*/
  136. .shop-cart-list>.list-container>.supplier>.goods>.goods-handle{
  137.     width: 60px;
  138.     height: 50px;
  139.     line-height: 20px;
  140.     margin: 20px 0 0 60px;
  141.     display: flex;
  142.     flex-flow: column nowrap;
  143.     justify-content: space-between;
  144.     justify-items: center;
  145.     align-items: start;
  146. }
  147. .shop-cart-list>.list-container>.supplier>.goods>.goods-handle>a{
  148.     color: #333333;
  149. }
  150. .shop-cart-list>.list-container>.supplier>.goods>.goods-handle>a:hover{
  151.     color: #f64c59;
  152.     cursor: pointer;
  154. }

结算条-1 shop_cart_pay

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_pay.css">
  7. </head>
  8. <body>
  9. <!--购物车页面结算组件-->
  10. <div class="shop-cart-pay">
  11.     <div class="total-amount">
  12.         <div class="total-left">
  13.                 <span>
  14.                     <input type="checkbox" id="total-amount" name="total-amount">
  15.                     <label for="total-amount">全选</label>
  16.                 </span>
  17.             <a href="">删除选中商品</a>
  18.             <a href="">移到关注</a>
  19.             <a href="">清理购物车</a>
  20.         </div>
  21.         <div class="total-right">
  22.             <span>已选中 <i>4</i>件商品</span>
  23.             <span>总价:<i>¥6899.00</i></span>
  24.             <button>去结算</button>
  25.         </div>
  26.     </div>
  27. </div>
  28. </body>
  29. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "../public/css/public_reset.css";
  4. /*单页参考线*/
  5. /**:not(body){ outline: 1px dashed;}*/
  7. /*订单合计*/
  8. .shop-cart-pay>.total-amount{
  9.     width: 100%;
  10.     height: 40px;
  11.     background-color: #e9e9e9;
  12.     line-height: 40px;
  13.     text-align: center;
  14.     margin-bottom: 16px;
  15.     display: flex;
  16.     justify-content: space-between;
  17. }
  18. /*合计左侧*/
  19. .shop-cart-pay>.total-amount>.total-left{
  20.     width: 300px;
  21.     margin: 0 10px;
  22.     display: flex;
  23.     justify-content: space-around;
  24. }
  25. .shop-cart-pay>.total-amount>.total-left>a:last-of-type{
  26.     font-weight: bold;
  27. }
  28. .shop-cart-pay>.total-amount>.total-left>a:hover{
  29.     cursor: pointer;
  30.     color: #f64c59;
  31. }
  32. /*合计右侧*/
  33. .shop-cart-pay>.total-amount>.total-right{
  34.     width: 400px;
  35.     margin-right: 20px;
  36.     display: flex;
  37.     justify-content: space-between;
  38. }
  39. .shop-cart-pay>.total-amount>.total-right i{
  40.     font-size: 18px;
  41.     font-weight: bold;
  42.     color: #f64c59;
  43.     margin: 0 10px;
  44. }
  45. .shop-cart-pay>.total-amount>.total-right>button{
  46.     width: 100px;
  47.     height: 40px;
  48.     color: white;
  49.     font-weight: bold;
  50.     background-color: #f64c59;
  51.     border: none;
  52. }
  53. .shop-cart-pay>.total-amount>.total-right>button:hover{
  54.     cursor: pointer;
  55.     background-color: #178cee;
  56.     box-shadow: 0 0 5px #888888;
  57. }

结算条-2 shop_pay

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>支付结算条组件</title>
  6.     <link rel="stylesheet" href="shop_pay.css">
  7.     <style>
  9.     </style>
  10. </head>
  11. <body>
  13. <!--支付结算条组件-->
  14. <div class="shop-pay">
  15.     <div class="pay-total">
  16.         <span><i>3</i>件商品，总商品金额：</span>
  17.         <span>¥30496.00</span>
  18.         <span>调货服务费：</span>
  19.         <span>¥50.00</span>
  20.         <span>运费</span>
  21.         <span>¥20.00</span>
  22.         <div class="total-row">
  23.             <span>应付金额: <i>¥30566.00</i></span>
  24.             <div class="adder-info">
  25.                 <span>邮寄地址：北京市朝阳区广渠东路18号，狗肉馆前台</span>
  26.                 <span>收货人：张小帅  17****36859</span>
  27.             </div>
  28.         </div>
  29.         <button>提交订单</button>
  30.     </div>
  31. </div>
  32. </body>
  33. </html>

css代码

  1. /*引入格式重置样式表*/
  2. @import "../public/css/public_reset.css";
  4. /*单页参考线*/
  5. /**:not(body){ outline: 1px dashed;}*/
  7. /*组件页--最外层DIV*/
  8. .shop-pay{
  9.     width: 1200px;
  10.     height: auto;
  11.     background-color: white;
  12.     font-size: 14px;
  13. }
  14. .shop-pay>.pay-total{
  15.     width: 100%;
  16.     display: grid;
  17.     grid-template-columns: 1fr 120px;
  18.     grid-template-rows: 36px 36px 36px 80px 80px;
  19.     justify-items: end;
  20. }
  22. /*费用统计分项*/
  23. .pay-total>span{
  24.     align-self: center;
  25. }
  26. .pay-total>span>i{
  27.     font-size: 20px;
  28.     font-weight: bolder;
  29.     color: #f64c59;
  30.     margin-right: 10px;
  31. }
  32. .pay-total>span:nth-child(2){
  33.     font-size: 20px;
  34.     color: #f64c59;
  35.     font-weight: bolder;
  36.     margin-right: 20px;
  37. }
  38. .pay-total>span:nth-child(4){
  39.     font-size: 18px;
  40.     color: darkorange;
  41.     margin-right: 20px;
  42. }
  43. .pay-total>span:nth-child(6){
  44.     font-size: 16px;
  45.     color: #333333;
  46.     margin-right: 20px;
  47. }
  49. /*总计金额 所在行*/
  50. .pay-total>.total-row{
  51.     grid-row: 4/5;
  52.     grid-column: 1/3;
  53.     height: 80px;
  54.     background-color: #e9e9e9;
  55.     line-height: 40px;
  56.     text-align: right;
  57.     place-self: stretch;
  58. }
  59. .pay-total>.total-row>span>i{
  60.     font-size: 24px;
  61.     font-weight: bolder;
  62.     color: #f64c59;
  63.     margin: 0 20px;
  64. }
  65. .pay-total>.total-row>.adder-info>span{
  66.     font-weight: bolder;
  67.     margin-right: 20px;
  68. }
  70. /*提交订单按钮*/
  71. .pay-total>button{
  72.     grid-row: 5/6;
  73.     grid-column: 2/3;
  74.     align-self: center;
  75.     margin-right: 20px;
  76.     width: 120px;
  77.     height: 40px;
  78.     color: white;
  79.     font-size: 20px;
  80.     font-weight: bolder;
  81.     background-color: #f64c59;
  82.     border: none;
  83. }
  84. .pay-total>button:hover{
  85.     cursor: pointer;
  86.     background-color: #178cee;
  87.     box-shadow: 0 0 6px #cccccc;
  88. }

因为基于组件进行拼接，所以购物车页面和结算页面的HTML就不罗列了，主要展示引用css样式表部分；

购物车页面CSS引用

shop_cart.css

  1. /*引入格式重置样式表*/
  2. @import "../components/public/css/public_reset.css";
  4. /*引入公共头部样式表*/
  5. @import "../components/public/css/public_header.css";
  7. /*引入购物车 头部样式表*/
  8. @import "../components/shop/shop_cart_headline.css";
  10. /*引入购物车 商品列表样式表*/
  11. @import "../components/shop/shop_cart_list.css";
  13. /*引入购物车 购物车页面结算组件*/
  14. @import "../components/shop/shop_cart_pay.css";
  16. /*引入公共底部样式表*/
  17. @import "../components/public/css/public_footer.css";

结算页css引用

shop_pays.css

  1. /*引入格式重置样式表*/
  2. @import "../components/public/css/public_reset.css";
  4. /*引入公共头部样式表*/
  5. @import "../components/public/css/public_header.css";
  7. /*引入结算页 头部样式表*/
  8. @import "../components/shop/shop_cart_headline.css";
  10. /*引入 支付结算信息组件*/
  11. @import "../components/shop/shop_payinfo.css";
  13. /*引入购物车列表组件*/
  14. @import "../components/shop/shop_cart_list.css";
  16. /*引入结算页组件*/
  17. @import "../components/shop/shop_pay.css";
  19. /*引入公共底部样式表*/
  20. @import "../components/public/css/public_footer.css";
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