search

博客列表 >购物车实例页面写法（仿京东商城）--PHP中文网线上培训十期0101

购物车实例页面写法（仿京东商城）--PHP中文网线上培训十期0101

高的PHP十期培训学习笔记
高的PHP十期培训学习笔记原创
2020年01月04日 19:55:271260浏览

今天根据在PHP中文网所学的前端知识来完成一个商城购物车的页面的编写，这里参照的是京东的购物车。

参照页面

首先分析页面结构

其中购物车中的商品数量在实际使用情况中应该是不固定的，所以这里需要使用flex布局来写，使用列对齐的方式写出来一条，然后复制；

按照分板图写出HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车</title>
  6.     <link rel="stylesheet" href="shop_public_Cart.css">
  7. </head>
  8. <body>
  9. <div class="shop-public-cart">
  10.         <!--    菜单和地址-->
  11.         <div class="nav-top">
  12.             <span>全部商品 3</span>
  13.             <div>
  14.                 <span>配送到：</span>
  15.                 <span>湖南省岳阳市岳阳楼区</span>
  16.             </div>
  17.         </div>
  18.         <!--    抬头-->
  19.         <div class="rise">
  20.         <span>
  21.             <input type="checkbox" id="all-Choice" checked>
  22.             <label for="all-Choice">全选</label>
  23.         </span>
  24.             <span>商品</span>
  25.             <span class="W120">单价</span>
  26.             <span class="W120">数量</span>
  27.             <span class="W120">小计</span>
  28.             <span class="W120">操作</span>
  29.         </div>
  30.         <!--    商品列表-->
  31.         <div class="list">
  32.             <div>
  33.                 <span>
  34.                     <label><input type="checkbox" name="choose" checked></label>
  35.                 </span>
  36.                 <span><a href=""><img src="../../../static/images/1.jpg" alt=""></a></span>
  37.                 <span><a href="">达尔优（dareu）牧马人五代EM915KBS有线鼠标</a></span>
  38.                 <span class="W120">五代黑色</span>
  39.                 <span class="W120">&yen;199.00</span>
  40.                 <span class="W120"><label><input type="number" name="count" value="1" min="1"></label></span>
  41.                 <span class="W120">&yen;199.00</span>
  42.                 <span class="W120">删除</span>
  43.             </div>
  44.             <div>
  45.                 <span>
  46.                     <label><input type="checkbox" name="choose" checked></label>
  47.                 </span>
  48.                 <span><a href=""><img src="../../../static/images/1.jpg" alt=""></a></span>
  49.                 <span><a href="">达尔优（dareu）牧马人五代EM915KBS有线鼠标</a></span>
  50.                 <span class="W120">五代黑色</span>
  51.                 <span class="W120">&yen;199.00</span>
  52.                 <span class="W120"><label><input type="number" name="count" value="1" min="1"></label></span>
  53.                 <span class="W120">&yen;199.00</span>
  54.                 <span class="W120">删除</span>
  55.             </div>
  56.             <div>
  57.                 <span>
  58.                     <label><input type="checkbox" name="choose" checked></label>
  59.                 </span>
  60.                 <span><a href=""><img src="../../../static/images/1.jpg" alt=""></a></span>
  61.                 <span><a href="">达尔优（dareu）牧马人五代EM915KBS有线鼠标</a></span>
  62.                 <span class="W120">五代黑色</span>
  63.                 <span class="W120">&yen;199.00</span>
  64.                 <span class="W120"><label><input type="number" name="count" value="1" min="1"></label></span>
  65.                 <span class="W120">&yen;199.00</span>
  66.                 <span class="W120">删除</span>
  67.             </div>
  68.             <div>
  69.                 <span>
  70.                     <label><input type="checkbox" name="choose" checked></label>
  71.                 </span>
  72.                 <span><a href=""><img src="../../../static/images/1.jpg" alt=""></a></span>
  73.                 <span><a href="">达尔优（dareu）牧马人五代EM915KBS有线鼠标</a></span>
  74.                 <span class="W120">五代黑色</span>
  75.                 <span class="W120">&yen;199.00</span>
  76.                 <span class="W120"><label><input type="number" name="count" value="1" min="1"></label></span>
  77.                 <span class="W120">&yen;199.00</span>
  78.                 <span class="W120">删除</span>
  79.             </div>
  80.         </div>
  81. <!--        结算-->
  82.         <div class="buy">
  83.             <span>已选择<a>3</a>件商品</span>
  84.             <span>总价：<a>617.90元</a></span>
  85.             <button>去结算</button>
  86.         </div>
  88. </div>
  89. </body>
  90. </html>

增加公共样式后的效果

按顺序先写顶部的样式

  1. /*购物车*/
  2. .shop-public-cart {
  3.     width: 1200px;
  4.     margin: 30px auto;
  5.     background-color: #fff;
  6.     padding: 15px;
  7.     box-sizing: border-box;
  8. }
  9. /*菜单和地址*/
  10. .shop-public-cart > .nav-top {
  11.     display: flex;
  12.     justify-content: space-between;
  13.     height: 30px;
  14. }
  15. .shop-public-cart > .nav-top > span:first-of-type {
  16.     color: #E2231A;
  17.     font-size: 16px;
  18.     border-bottom: 1px solid #E2231A;
  19. }
  20. .shop-public-cart > .nav-top > div {
  21.     color: #666666;
  22. }
  23. .shop-public-cart > .nav-top > div > span:last-of-type {
  24.     border: 1px solid #CECBCE;
  25.     padding: 5px;
  26.     line-height: 23px;
  27. }

再写项目分类的样式

  1. /*公共宽度*/
  2. .W120 {
  3.     width: 120px;
  4. }
  6. /*抬头*/
  7. .shop-public-cart > .rise {
  8.     display: flex;
  9.     text-align: center;
  10.     background: #f3f3f3;
  11.     border: 1px solid #e9e9e9;
  12.     height: 32px;
  13.     align-items: center;
  14.     margin-bottom: 10px;
  15.     padding-left: 10px;
  16. }
  18. .shop-public-cart > .rise > span:nth-of-type(2) {
  19.     flex: 1;
  20. }

这里添加了一个宽度值，用于小项目的宽度定位，这样显示更整齐

商品列表的样式

  1. /*商品列表*/
  2. .shop-public-cart > .list {
  3.     display: flex;
  4.     flex-direction: column;
  5. }
  6. .shop-public-cart > .list > div {
  7.     height: 120px;
  8.     display: flex;
  9.     align-items: center;
  10.     background-color: #fef4e8;
  11.     border-bottom: 1px solid #999;
  12. }
  13. .shop-public-cart > .list > div img {
  14.     width: 80px;
  15.     height: 80px;
  16.     border: 1px solid #eee;
  17. }
  18. .shop-public-cart > .list > div > span {
  19.     padding: 10px;
  20.     box-sizing: border-box;
  21.     text-align: center;
  22. }
  23. .shop-public-cart > .list > div > span input {
  24.     width: 60px;
  25.     border: 1px solid #CECBCE;
  27. }
  28. .shop-public-cart > .list > div > span:nth-of-type(3) {
  29.     flex: 1;
  30. }

一条商品调试好后我们就可以在HTML代码中复制这个商品的代码，查看多条商品信息时的显示状态

没问题后我们继续写提交功能

  1.  /*结算*/
  2. .shop-public-cart > .buy {
  3.     border: 1px solid #e9e9e9;
  4.     height: 50px;
  5.     display: flex;
  6.     justify-content: end;
  7.     align-items: center;
  8.     margin-top: 20px;
  9. }
  10. .shop-public-cart > .buy > button {
  11.     width: 90px;
  12.     height: 50px;
  13.     font-size: 20px;
  14.     text-align: center;
  15.     line-height: 50px;
  16.     border: none;
  17.     color: white;
  18.     font-weight: 700;
  19.     background-color: #E2231A;
  20. }
  21. .shop-public-cart > .buy > span {
  22.     padding: 0 20px;
  23. }
  25. .shop-public-cart > .buy > span > a {
  26.     color: #E2231A;
  27.     font-weight: 700;
  28.     margin: 0 5px;
  29. }

引入网站的头部和尾部样式表

  1. @import "../public_header/public_header.css";
  2. @import "../public_footer/public_footer.css";

引入网站的头部和尾部HTML代码

头部

  1. <nav class="public-header">
  2.     <a href="">网站首页</a>
  3.     <a href="">专题</a>
  4.     <a href="">网站导航</a>
  5.     <a href="">二手商品</a>
  6.     <a href="">讨论区</a>
  7.     <span>
  8.         <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  9.         <a href="">免费注册</a>
  10.     </span>
  11. </nav>

尾部

  1. <footer class="public-footer">
  2.     <div>
  3.         <a href="">简介</a>
  4.         <a href="">联系我们</a>
  5.         <a href="">招聘信息</a>
  6.         <a href="">友情链接</a>
  7.         <a href="">用户服务协议</a>
  8.         <a href="">隐私权声明</a>
  9.         <a href="">法律投诉声明</a>
  10.     </div>
  11.     <div><span>LOGO</span></div>
  12.     <div>
  13.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  14.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  15.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  16.     </div>
  17.     <div>
  18.         <p>关注公众号</p>
  19.         <img src="../../../static/images/erwei-code.png" alt="">
  20.     </div>
  21. </footer>

最终的效果

上一条：学号:572616 -元旦1月1日商城系统首页和购物车页面下一条：第十期商城购物车和结算页面实战（2019-12-31）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多