1.购物车

1.2 图片展示

1.3 代码展示

  1. <!-- 购物车区块 -->
  2. <section class="container py-2 d-flex jusify-content-between align-items-center">
  3.     <div class="fontSize16">购物车</div>
  4.     <div>
  5.         <img src="./img/cartTop01.png" alt="">
  6.     </div>
  7.     <a href="" class="fontSize16">继续购物 ></a>
  8. </section>
  9. <!-- 购物车标题 -->
  10. <section class="container bg-db text-center d-flex align-items-center py-2">
  11.     <div class="w-40 fontSize14">商品</div>
  12.     <div class="w-10 fontSize14">单价</div>
  13.     <div class="w-30 fontSize14">数量</div>
  14.     <div class="w-10 fontSize14">小计</div>
  15.     <div class="w-10 fontSize14">操作</div>
  16. </section>
  17. <!-- 购物车内容 -->
  18. <section class="container d-flex align-items-center">
  19.     <div class="w-40 pl-4 d-flex align-items-center">
  20.         <input type="checkbox" class="w-20px h-20px" name="" id="">
  21.         <img src="./img/cart01.jpg" alt="">
  22.         <div class="ml-4 pl-4">
  23.             <p><a href="" class="fontSize14">细说PHP</a></p>
  24.             <p class="mt-4 mb-1 text-777">图书分类</p>
  25.             <p class="text-777">细说系列</p>
  26.         </div>
  27.     </div>
  28.     <div class="w-10 text-center">￥20.00</div>
  29.     <div class="w-30 d-flex jusify-content-center align-items-center">
  30.         <div class="border px-2 mr-2 cursor fontSize18">-</div>
  31.         <input type="text" class="border-0" size="1" value="1">
  32.         <div class="border px-2 py-1 cursor fontSize12">+</div>
  33.     </div>
  34.     <div class="w-10 text-center">￥20.00</div>
  35.     <div class="w-10 text-center">
  36.         <a href="">删除</a>
  37.     </div>
  38. </section>
  39. <section class="container border-top-dashed d-flex align-items-center">
  40.     <div class="w-40 pl-4 d-flex align-items-center">
  41.         <input type="checkbox" class="w-20px h-20px" name="" id="">
  42.         <img src="./img/cart01.jpg" alt="">
  43.         <div class="ml-4 pl-4">
  44.             <p><a href="" class="fontSize14">细说PHP</a></p>
  45.             <p class="mt-4 mb-1 text-777">图书分类</p>
  46.             <p class="text-777">细说系列</p>
  47.         </div>
  48.     </div>
  49.     <div class="w-10 text-center">￥20.00</div>
  50.     <div class="w-30 d-flex jusify-content-center align-items-center">
  51.         <div class="border px-2 mr-2 cursor fontSize18">-</div>
  52.         <input type="text" class="border-0" size="1" value="1">
  53.         <div class="border px-2 py-1 cursor fontSize12">+</div>
  54.     </div>
  55.     <div class="w-10 text-center">￥20.00</div>
  56.     <div class="w-10 text-center">
  57.         <a href="">删除</a>
  58.     </div>
  59. </section>
  60. <!-- 购物车底部 -->
  61. <section class="container d-flex jusify-content-between align-items-center bg-db">
  62.     <section class="py-2 d-flex align-items-center pl-1">
  63.         <input type="checkbox" name="" class="w-20px h-20px" id="">
  64.         <a href="" class="ml-4">全选</a>
  65.         <a href="" class="ml-2">删除</a>
  66.     </section>
  67.     <section class="d-flex align-items-center w-30 jusify-content-between">
  68.         <div>共<span class="textColorRed120">2</span>件商品</div>
  69.         <div class="">合计: <span class="textColorRed120">￥40.00</span>元</div>
  70.         <div class="border-0 text-center bg-8e text-white py-2 w-40">结算</div>
  71.     </section>
  72. </section>

2.订单页

2.1 图片展示

2.2 代码展示

  1. <!-- 订单区块 -->
  2. <section class="container py-2 d-flex jusify-content-between align-items-center">
  3.     <div class="fontSize16">订单确认</div>
  4.     <div class="w-60">
  5.         <img src="./img/cartTop02.png" alt="">
  6.     </div>
  7. </section>
  8. <!-- 订单内容区域 -->
  9. <section class="container d-flex jusify-content-between">
  10.     <section class=" w-60">
  11.         <div class="d-flex border-bottom align-items-center jusify-content-between py-2">
  12.             <p class="fontSize14">收件信息</p>
  13.             <a href="" class="fontSize12">新增地址</a>
  14.         </div>
  15.         <div class="mt-2 d-flex flex-wrap jusify-content-between ">
  16.             <div class="w-45 mt-4 border2 border-dark cursor">
  17.                 <div class="d-flex jusify-content-between align-item-conter py-2">
  18.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
  19.                     <div class="pr-2">
  20.                         <a href="">删除</a>
  21.                         <span>|</span>
  22.                         <a href="">编辑</a>
  23.                     </div>
  24.                 </div>
  25.                 <div class="bg-e9 pl-2">
  26.                     <p class="py-4">广东省 天河区 XXX XX</p>
  27.                     <p class="pb-4">XXXXXXXXXX</p>
  28.                 </div>
  29.             </div>
  30.             <div class="w-45 mt-4 border2 cursor">
  31.                 <div class="d-flex jusify-content-between align-item-conter py-2">
  32.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
  33.                     <div class="pr-2">
  34.                         <a href="">删除</a>
  35.                         <span>|</span>
  36.                         <a href="">编辑</a>
  37.                     </div>
  38.                 </div>
  39.                 <div class="bg-e9 pl-2">
  40.                     <p class="py-4">广东省 天河区 XXX XX</p>
  41.                     <p class="pb-4">XXXXXXXXXX</p>
  42.                 </div>
  43.             </div>
  44.             <div class="w-45 mt-4 border2 cursor">
  45.                 <div class="d-flex jusify-content-between align-item-conter py-2">
  46.                     <div class="pl-2"><span>张三</span><span>【默认地址】</span></div>
  47.                     <div class="pr-2">
  48.                         <a href="">删除</a>
  49.                         <span>|</span>
  50.                         <a href="">编辑</a>
  51.                     </div>
  52.                 </div>
  53.                 <div class="bg-e9 pl-2">
  54.                     <p class="py-4">广东省 天河区 XXX XX</p>
  55.                     <p class="pb-4">XXXXXXXXXX</p>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.         <div class="my-4">
  60.             <div class="py-2 border-bottom fontSize16">支付方式</div>
  61.             <div class="mt-2 py-2 d-flex jusify-content-between">
  62.                 <img src="./img/way01.jpg" class="border2 cursor w-15 border-dark" alt="">
  63.                 <img src="./img/way02.jpg" class="border2 cursor w-15" alt="">
  64.                 <img src="./img/way03.jpg" class="border2 cursor w-15" alt="">
  65.                 <img src="./img/way04.jpg" class="border2 cursor w-15" alt="">
  66.             </div>
  67.         </div>
  68.         <div class="my-4">
  69.             <div class="py-2 border-bottom fontSize16">选择快递</div>
  70.             <div class="mt-2 py-2 d-flex jusify-content-between">
  71.                 <span class="w-15 border2 cursor border-dark text-center py-2">顺丰快递</span>
  72.                 <span class="w-15 border2 cursor text-center py-2">百世快递</span>
  73.                 <span class="w-15 border2 cursor text-center py-2">韵达快递</span>
  74.                 <span class="w-15 border2 cursor text-center py-2">中通快递</span>
  75.             </div>
  76.         </div>
  77.     </section>
  78.     <section class=" w-35">
  79.         <div class="bg-f5 px-2">
  80.             <div class=" d-flex jusify-content-between align-items-center">
  81.                 <p class="fontSize16 py-2">订单内容</p>
  82.                 <a href="" class="fontSize12">返回购物车</a>
  83.             </div>
  84.             <div class="d-flex py-2 px-4 border-top jusify-content-between align-items-center bg-f5">
  85.                 <img src="./img/order01.jpg" alt="">
  86.                 <div class="w-60">
  87.                     <p>细说PHP</p>
  88.                     <p class="py-4 text-777">分类：编辑书籍</p>
  89.                     <p class="text-777">数量：1</p>
  90.                 </div>
  91.                 <p>￥199.00</p>
  92.             </div>
  93.             <div class="d-flex py-2 px-4 border-top jusify-content-between align-items-center bg-f5">
  94.                 <img src="./img/order01.jpg" alt="">
  95.                 <div class="w-60">
  96.                     <p>细说PHP</p>
  97.                     <p class="py-4 text-777">分类：编辑书籍</p>
  98.                     <p class="text-777">数量：1</p>
  99.                 </div>
  100.                 <p>￥199.00</p>
  101.             </div>
  102.         </div>
  103.         <div class="px-2">
  104.             <div class="d-flex jusify-content-between">
  105.                 <p>商品价格</p>
  106.                 <p>￥199.00</p>
  107.             </div>
  108.             <div class="d-flex my-2 jusify-content-between">
  109.                 <p>优惠价格</p>
  110.                 <p>￥19.00</p>
  111.             </div>
  112.             <div class="d-flex jusify-content-between">
  113.                 <p>运费</p>
  114.                 <p>￥1.00</p>
  115.             </div>
  116.             <div class="border-top my-4"></div>
  117.             <div class="d-flex jusify-content-between">
  118.                 <p class="fontSize16">合计：</p>
  119.                 <p class="fontSize16 textColorRed120">￥2</p>
  120.             </div>
  121.         </div>
  122.         <div class="px-2 py-2">
  123.             <a class="w-100 cursor d-block text-center border-0 text-white bg-dark py-3 hover">去支付</a>
  124.         </div>
  125.     </section>
  126. </section>

更多相关文章

  1. 某商城登录注册-购物车订单支付-个人中心所有页面
  2. 购物车页面
  3. 订单详情页
  4. 某商城列表和详情页
  5. 商城列表内容
  6. 商品详情页练习
  7. 我的第一个作业
  8. PHP开发实例之公共方法【代码详解】
  9. 京东秒杀功能HTML源码展示

随机推荐

  1. mall整合OSS实现文件上传
  2. mall在Windows环境下的部署
  3. Navicat实用功能：数据备份与结构同步
  4. mall整合SpringSecurity和JWT实现认证和
  5. 让Monad来得更猛烈些吧_Haskell笔记11
  6. mall整合SpringTask实现定时任务
  7. android sdk, adt编译问题
  8. A
  9. Java 多线程：volatile 变量、happens-befo
  10. newtype_Haskell笔记8