简体中文（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

博客列表 >HTML制作静态商品购物车结算页面

HTML制作静态商品购物车结算页面

饮雪煮茶
饮雪煮茶原创
2020年01月01日 15:45:2618336浏览

通过十节课20个小时的学习，提高还是显著的，可能平时还是做的比较少，对细节处理上感觉力不从心，基本大的方面问题应该不是太大了。总体来说大的宏观结构布局掌握差不多了，就是细小各类插件的运用，细节处理上对齐，线条还是有点问题。

购物车页面html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品购物车</title>
  6.     <link rel="stylesheet" href="../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="./public_shop_cart.css">
  8. </head>
  9. <body>
  10. <nav class="public-header">
  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. </nav>
  21. <div class="public-shop-cart">
  22.     <div class="content">
  23.         <span>全部商品 3</span>
  24.         <div class="cart-title">
  25.             <span>
  26.                 <input type="checkbox" id="all">
  27.                 <label for="all">全选</label>
  28.             </span>
  29.             <span>商品</span>
  30.             <span>单价</span>
  31.             <span>数量</span>
  32.             <span>小计</span>
  33.             <span>操作</span>
  34.         </div>
  35.         <div class="cart-detail"3>
  36.             <input type="checkbox">
  37.             <div class="cart-title">
  38.                 <img src="../static/images/cart1.png" alt="">
  39.                 <div>
  40.                     <a href=""><i>京东电脑</i> 惠普（HP）战66 微边框商用一体机电脑23.8英寸(九代i5-9500T</a>
  41.                     <span><i class="iconfont icon-icon_shezhi"></i><a href="">选服务</a></span>
  42.                 </div>
  43.                 <span>【九代i5/8G/双硬盘/独</span>
  44.             </div>
  45.             <div class="cart-price">&yen;4999.00</div>
  46.             <div class="cart-number">
  47.                 <span class="sub">-</span> <input type="text" id="mumber" value="1"><span class="plus">+</span>
  48.             </div>
  49.             <div class="cart-subtotal">&yen;4999.00</div>
  50.             <div class="cart-oprate"><a href="">删除</a></div>
  51.         </div>
  52.         <div class="cart-detail"3>
  53.             <input type="checkbox">
  54.             <div class="cart-title">
  55.                 <img src="../static/images/cart1.png" alt="">
  56.                 <div>
  57.                     <a href=""><i>京东电脑</i> 惠普（HP）战66 微边框商用一体机电脑23.8英寸(九代i5-9500T</a>
  58.                     <span><i class="iconfont icon-icon_shezhi"></i><a href="">选服务</a></span>
  59.                 </div>
  60.                 <span>【九代i5/8G/双硬盘/独</span>
  61.             </div>
  62.             <div class="cart-price">&yen;4999.00</div>
  63.             <div class="cart-number">
  64.                 <span class="sub">-</span> <input type="text" id="mumber" value="1"><span class="plus">+</span>
  65.             </div>
  66.             <div class="cart-subtotal">&yen;4999.00</div>
  67.             <div class="cart-oprate"><a href="">删除</a></div>
  68.         </div>
  69.         <div class="cart-detail"3>
  70.             <input type="checkbox">
  71.             <div class="cart-title">
  72.                 <img src="../static/images/cart1.png" alt="">
  73.                 <div>
  74.                     <a href=""><i>京东电脑</i> 惠普（HP）战66 微边框商用一体机电脑23.8英寸(九代i5-9500T</a>
  75.                     <span><i class="iconfont icon-icon_shezhi"></i><a href="">选服务</a></span>
  76.                 </div>
  77.                 <span>【九代i5/8G/双硬盘/独</span>
  78.             </div>
  79.             <div class="cart-price">&yen;4999.00</div>
  80.             <div class="cart-number">
  81.                 <span class="sub">-</span> <input type="text" id="mumber" value="1"><span class="plus">+</span>
  82.             </div>
  83.             <div class="cart-subtotal">&yen;4999.00</div>
  84.             <div class="cart-oprate"><a href="">删除</a></div>
  85.         </div>
  86.         <div class="cart-detail"3>
  87.             <input type="checkbox">
  88.             <div class="cart-title">
  89.                 <img src="../static/images/cart1.png" alt="">
  90.                 <div>
  91.                     <a href=""><i>京东电脑</i> 惠普（HP）战66 微边框商用一体机电脑23.8英寸(九代i5-9500T</a>
  92.                     <span><i class="iconfont icon-icon_shezhi"></i><a href="">选服务</a></span>
  93.                 </div>
  94.                 <span>【九代i5/8G/双硬盘/独</span>
  95.             </div>
  96.             <div class="cart-price">&yen;4999.00</div>
  97.             <div class="cart-number">
  98.                 <span class="sub">-</span> <input type="text" id="mumber" value="1"><span class="plus">+</span>
  99.             </div>
  100.             <div class="cart-subtotal">&yen;4999.00</div>
  101.             <div class="cart-oprate"><a href="">删除</a></div>
  102.         </div>
  103.         <div class="cart-btn"><span>总价：</span><span> ¥14797.00 </span><button class="btn">去结算</button></div>
  104.     </div>
  105. </div>
  106. <footer class="public-footer">
  107.     <div>
  108.         <a href="">简介</a>
  109.         <a href="">联系我们</a>
  110.         <a href="">招聘信息</a>
  111.         <a href="">友情链接</a>
  112.         <a href="">用户服务协议</a>
  113.         <a href="">隐私权声明</a>
  114.         <a href="">法律投诉声明</a>
  115.     </div>
  116.     <div><span>LOGO</span></div>
  117.     <div>
  118.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  119.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  120.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  121.     </div>
  122.     <div>
  123.         <p>关注公众号</p>
  124.         <img src="../static/images/erwei-code.png" alt="">
  125.     </div>
  126. </footer>
  127. </body>
  128. </html>

购物车css

  1. @import "../public_reset.css";
  2. @import "../public_header/public_header.css";
  3. @import "../public_footer/public_footer.css";
  5. .public-shop-cart > .content {
  6.     width: 1200px;
  7.     background-color: #fff;
  8.     margin: 20px auto;
  9.     display: flex;
  10.     flex-direction: column;
  11. }
  12. .public-shop-cart > .content > span{
  13.     font-size: 20px;
  14.     color: #E2231A;
  15.     border-bottom: 1px solid #E2231A;
  16.     height: 30px;
  17.     width: 100px;
  18.     padding: 3px;
  19. }
  20. .public-shop-cart > .content > .cart-title{
  21.     height: 32px;
  22.     background-color: #f3f3f3;
  23.     border: 1px solid #eee;
  24.     display: grid;
  25.     grid-template-columns: 100px 1fr 100px 120px 100px 100px;
  26.     align-items: center;
  27.     padding-left: 10px;
  28. }
  29. .public-shop-cart > .content > .cart-detail{
  30.     background-color: #fff4e8;
  31.     border-bottom: 1px solid #ddd;
  32.     padding: 20px 5px;
  33.     display: grid;
  34.     grid-template-columns: 40px 1fr 100px 120px 100px 100px;
  35.     align-items: center;
  36. }
  37. .public-shop-cart > .content > div.cart-detail:last-of-type{
  38.     border-bottom: none;
  39. }
  40. .public-shop-cart > .content >.cart-detail > .cart-title{
  41.     display: flex;
  42. }
  43. .public-shop-cart > .content >.cart-detail > .cart-title > div{
  44.     width: 300px;
  45.     padding: 0 15px;
  46.     display: flex;
  47.     flex-flow: column wrap;
  48. }
  49. .public-shop-cart > .content >.cart-detail > .cart-title > div > a > i{
  50.     font-style: normal;
  51.     color: #fff;
  52.     background-color: #E2231A;
  53.     border-radius: 3px;
  54.     padding: 0 5px;
  55. }
  56. .public-shop-cart > .content >.cart-detail > .cart-title > div > a:hover{
  57.     color: #E2231A;
  58. }
  59. .public-shop-cart > .content >.cart-detail > .cart-title > div > span > i{
  60.     color: #E2231A;
  61.     margin-right: 5px;
  62. }
  63. .public-shop-cart > .content >.cart-detail > .cart-title > div > span > a:hover{
  64.     color: #E2231A;
  65. }
  66. .public-shop-cart > .content >.cart-detail > .cart-title >img{
  67.     width: 80px;
  68.     height: 80px;
  69. }
  70. .public-shop-cart > .content > .cart-detail > .cart-number {
  71.     display: flex;
  72. }
  73. .public-shop-cart > .content > .cart-detail > .cart-number >input{
  74.     width: 50px;
  75.     height: 20px;
  76.     text-align: center;
  77.     outline: none;
  78.     box-shadow: none;
  79.     border: none;
  80.     border-top: 1px solid #aaa;
  81.     border-bottom: 1px solid #aaa;
  82. }
  83. .public-shop-cart > .content > .cart-detail > .cart-number > span{
  84.     width: 20px;
  85.     height: 20px    ;
  86.     border: 1px solid #aaa;
  87.     font-size: 15px;
  88.     text-align: center;
  89. }
  90. .public-shop-cart > .content > .cart-detail > .cart-number > span:hover{
  91.     cursor: pointer;
  92. }
  93. .public-shop-cart > .content > .cart-btn{
  94.     margin-top: 50px;
  95.     height: 50px;
  96.     display: flex;
  97.     justify-content: end;
  98.     align-items: center;
  99.     border: 1px solid #ddd;
  100. }
  101. .public-shop-cart > .content > .cart-btn > span:last-of-type{
  102.     font-size: 20px;
  103.     color: #E2231A;
  104.     margin: 0 10px;
  105.     font-weight: bold;
  106. }
  107. .public-shop-cart > .content > .cart-btn > .btn{
  108.     width: 100px;
  109.     height: 100%;
  110.     font-size: 20px;
  111.     color: #fff;
  112.     border: none;
  113.     background-color: #E2231A;
  114. }

商品购物车效果图

结算页面html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品结算页面</title>
  6.     <link rel="stylesheet" href="./public_shop_account.css">
  7. </head>
  8. <body>
  9. <nav 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 icon-huiyuan2"></i>登陆</a>
  17.         <a href="">免费注册</a>
  18.     </span>
  19. </nav>
  20. <div class="public-shop-account">
  21.     <div class="content">
  22.         <div class="shop-account-head"> 填写并核对订单信息 </div>
  23.         <div class="shop-account-info">
  24.             <div class="edit-address">
  25.                 <div class="address-head">
  26.                     <span>收货人信息</span>
  27.                     <a href="">新增收货地址</a>
  28.                 </div>
  29.                 <div class="address-info">
  30.                     <span>家里</span>
  31.                     <span>xxx xx省xx市xx街道</span>
  32.                     <a href="">编辑</a>
  33.                 </div>
  34.             </div>
  35.             <div class="edit-pay">
  36.                 <div class="pay-head">支付方式</div>
  37.                 <div class="pay-info">
  38.                     <span>货到付款</span>
  39.                     <span>在线支付</span>
  40.                     <a href="">更多>></a>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.         <div class="shop-account-detail">
  45.             <div class="account-address">
  46.                 <span><i>3</i> 件商品，总商品金额：</span>
  47.                 <span>&yen;14797.00</span>
  48.                 <span>运费：</span>
  49.                 <span><i>&yen;0.00</i></span>
  50.                 <span>商品优惠：</span>
  51.                 <span>-￥5.00</span>
  52.             </div>
  53.             <div class="account-pay">
  54.                 <span> 应付总额： <i>&yen;14792.00 </i></span>
  55.                 <span>寄送至：xxxx   xxxxxxxx  收货人：xxx 电话：</span>
  56.             </div>
  57.             <div class="account-btn"><button>提交订单</button></div>
  58.         </div>
  59.     </div>
  60. </div>
  61. <footer class="public-footer">
  62.     <div>
  63.         <a href="">简介</a>
  64.         <a href="">联系我们</a>
  65.         <a href="">招聘信息</a>
  66.         <a href="">友情链接</a>
  67.         <a href="">用户服务协议</a>
  68.         <a href="">隐私权声明</a>
  69.         <a href="">法律投诉声明</a>
  70.     </div>
  71.     <div><span>LOGO</span></div>
  72.     <div>
  73.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  74.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  75.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  76.     </div>
  77.     <div>
  78.         <p>关注公众号</p>
  79.         <img src="../static/images/erwei-code.png" alt="">
  80.     </div>
  81. </footer>
  82. </body>
  83. </html>

结算页面css

  1. @import "../public_reset.css";
  2. @import "../public_header/public_header.css";
  3. @import "../public_footer/public_footer.css";
  5. .public-shop-account > .content {
  6.     width: 1200px;
  7.     background-color: #fff;
  8.     margin: 20px auto;
  9.     display: flex;
  10.     flex-direction: column;
  11. }
  12. .public-shop-account > .content >.shop-account-head{
  13.     margin: 10px 5px;
  14.     font-size: 16px;
  15. }
  16. .public-shop-account > .content >.shop-account-info{
  17.     border: 1px solid #ccc;
  18.     padding: 10px;
  19. }
  20. .public-shop-account > .content >.shop-account-info > .edit-address{
  21.     border-bottom: 1px solid #ccc;
  22. }
  23. .public-shop-account > .content >.shop-account-info > .edit-address >.address-head{
  24.     display: flex;
  25.     justify-content: space-between;
  26.     padding: 10px 0;
  27. }
  28. .public-shop-account > .content >.shop-account-info > .edit-address >.address-head >span{
  29.     font-size: 14px;
  30.     font-weight: bold;
  31. }
  32. .public-shop-account > .content >.shop-account-info > .edit-address >.address-head >a{
  33.     color: #005ea7;
  34.     font-size: 12px;
  35. }
  36. .public-shop-account > .content >.shop-account-info > .edit-address >.address-head >a:hover{
  37.     color: #E2231A;
  38. }
  39. .public-shop-account > .content >.shop-account-info > .edit-address > .address-info{
  40.     display: flex;
  41.     padding: 20px;
  42.     justify-content: space-between;
  43. }
  44. .public-shop-account > .content >.shop-account-info > .edit-address > .address-info >span:first-of-type{
  45.     width: 120px;
  46.     height: 30px;
  47.     border: 3px solid #E2231A;
  48.     text-align: center;
  49.     margin-right: 10px;
  50.     font-size: 16px;
  51.     line-height: 30px;
  52. }
  53. .public-shop-account > .content >.shop-account-info > .edit-pay > .pay-head{
  54.     font-size: 14px;
  55.     font-weight: bold;
  56.     padding: 20px 0;
  57. }
  58. .public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info{
  59.     display: flex;
  60.     align-items: center;
  62. }
  63. .public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info >span{
  64.     width: 100px;
  65.     height: 30px;
  66.     border: 2px solid #ccc;
  67.     margin: 10px;
  68.     text-align: center;
  69.     line-height: 30px;
  70. }
  71. .public-shop-account > .content >.shop-account-info > .edit-pay >.pay-info >span:hover{
  72.     border: 2px solid #E2231A;
  73. }
  75. .public-shop-account > .content > .shop-account-detail > .account-address{
  76.     padding: 20px;
  77.     display: grid;
  78.     grid-template-columns: 1fr 150px;
  79.     grid-template-rows: repeat(3, 30px);
  80.     justify-items: end;
  81. }
  82. .public-shop-account > .content > .shop-account-detail > .account-address i{
  83.     font-style: normal;
  84.     color: #E2231A;
  85. }
  86. .public-shop-account > .content > .shop-account-detail > .account-pay{
  87.     height: 80px;
  88.     background-color: #eee;
  89.     border: 1px solid #ccc;
  90.     display: flex;
  91.     padding: 10px 20px 0 0;
  92.     flex-direction: column;
  93.     align-items: flex-end;
  94. }
  95. .public-shop-account > .content > .shop-account-detail > .account-pay > span > i{
  96.     font-style: normal;
  97.     font-size: 20px;
  98.     color: #E2231A;
  99. }
  100. .public-shop-account > .content > .shop-account-detail > .account-btn{
  101.     display: flex;
  102.     justify-content: flex-end;
  103. }
  104. .public-shop-account > .content > .shop-account-detail > .account-btn > button{
  105.     border: none;
  106.     background-color: #E2231A;
  107.     color: #fff;
  108.     width: 120px;
  109.     height: 40px;
  110.     font-size: 16px;
  111.     font-weight: bold;
  112.     margin: 10px 0;
  113. }

结算页面效果图

上一条：购物车仿写--PHP培训十期线上班下一条：CSS学习之Grid布局属性总结--PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
小神2022-10-08 16:54:071楼
不错，感谢分享
  • 不错不错不错
    小神2022-10-08 16:54:38
  • 不错不错不错
    小神2022-10-08 16:54:25

相关文章

查看更多