简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >商城购物车页面与结算页面实战----PHP培训十期线上班

商城购物车页面与结算页面实战----PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2020年01月02日 12:31:251207浏览

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

概述与编写感受

本次实战通过组件的形式，实现购物车与结算页面。在这其中我们用到了大量的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";
上一条：1231作业-仿写淘宝购物车页面-php培训十期线上班下一条：12-30作业：Grid属性示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多