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

博客列表 >购物车与结算

购物车与结算

安
安原创
2020年01月02日 16:40:061317浏览

1、效果图


2、购物车代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="dome1.css">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9. <header>
  10.     <div 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.     </div>
  21. </header>
  22. <!-- 购物车代码 -->
  23. <!-- 头部 -->
  24. <div class="head">
  25.     <img src="static/images/logo.png" alt="">
  26.     <span>购物车</span>
  27. </div>
  28. <!-- 1行7列 -->
  29. <div class="headline">
  30.     <label><input name="search" type="checkbox" value=""></label>
  31.     <span>全选</span>
  32.     <span>商品</span>
  33.     <span>商品简介</span>
  34.     <span>单价</span>
  35.     <span>数量</span>
  36.     <span>小计</span>
  37.     <span>操作</span>
  38. </div>
  39. <!-- 购物车8列 -->
  40. <div class="content">
  41.     <div class="nav">
  42.         <input name="search" type="checkbox" value=""><label for="search"></label>
  43.         <img src="imges/1.jpg.下载" alt="">
  44.         <span> 杉城 网红休闲零食大礼包一整箱送女友女生儿童礼盒美食品超市</span>
  45.         <span>零食大礼包</span>
  46.         <span>￥109.9</span>
  47.         <span>
  48.                 <select>
  49.                     <option value="1">1</option>
  50.                     <option value="2">2</option>
  51.                     <option value="3">3</option>
  52.                 </select>
  53.             </span>
  54.         <span>109.9</span>
  55.         <span>删除</span>
  56.     </div>
  57.     <div class="nav">
  58.         <input name="search" type="checkbox" value=""><label for="search"></label>
  59.         <img src="imges/1.jpg.下载" alt="">
  60.         <span> 杉城 网红休闲零食大礼包一整箱送女友女生儿童礼盒美食品超市</span>
  61.         <span>零食大礼包</span>
  62.         <span>￥109.9</span>
  63.         <span>
  64.                 <select>
  65.                     <option value="1">1</option>
  66.                     <option value="2">2</option>
  67.                     <option value="3">3</option>
  68.                 </select>
  69.             </span>
  70.         <span>109.9</span>
  71.         <span>删除</span>
  72.     </div>
  73.     <div class="nav">
  74.         <input name="search" type="checkbox" value=""><label for="search"></label>
  75.         <img src="imges/1.jpg.下载" alt="">
  76.         <span> 杉城 网红休闲零食大礼包一整箱送女友女生儿童礼盒美食品超市</span>
  77.         <span>零食大礼包</span>
  78.         <span>￥109.9</span>
  79.         <span>
  80.                 <select>
  81.                     <option value="1">1</option>
  82.                     <option value="2">2</option>
  83.                     <option value="3">3</option>
  84.                 </select>
  85.             </span>
  86.         <span>109.9</span>
  87.         <span>删除</span>
  88.     </div>
  89.     <div class="nav">
  90.         <input name="search" type="checkbox" value=""><label for="search"></label>
  91.         <img src="imges/1.jpg.下载" alt="">
  92.         <span> 杉城 网红休闲零食大礼包一整箱送女友女生儿童礼盒美食品超市</span>
  93.         <span>零食大礼包</span>
  94.         <span>￥109.9</span>
  95.         <span>
  96.                 <select>
  97.                     <option value="1">1</option>
  98.                     <option value="2">2</option>
  99.                     <option value="3">3</option>
  100.                 </select>
  101.             </span>
  102.         <span>109.9</span>
  103.         <span>删除</span>
  104.     </div>
  105. </div>
  106. <!-- 底部结算栏，1行6列，grid -->
  107. <div class="foot">
  108.     <label><input name="all" type="checkbox" value=""></label>
  109.     <span>全选</span>
  110.     <div>
  111.         <a href="">删除选中商品</a>
  112.         <a href="">移到关注</a>
  113.         <a href="">清理购物车</a>
  114.     </div>
  115.     <span>已选择 4 件商品</span>
  116.     <div>
  117.         <div>总价：￥ 439.60</div>
  118.         <div>促销：-￥0.00</div>
  119.     </div>
  120.     <a href="">去结算</a>
  121. </div>
  122. <!-- 底部html代码 -->
  123. <footer class="public-footer">
  124.     <div>
  125.         <a href="">简介</a>
  126.         <a href="">联系我们</a>
  127.         <a href="">招聘信息</a>
  128.         <a href="">友情链接</a>
  129.         <a href="">用户服务协议</a>
  130.         <a href="">隐私权声明</a>
  131.         <a href="">法律投诉声明</a>
  132.     </div>
  133.     <div><span>LOGO</span></div>
  134.     <div>
  135.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  136.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  137.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  138.     </div>
  139.     <div>
  140.         <p>关注公众号</p>
  141.         <img src="static/images/erwei-code.png" alt="">
  142.     </div>
  143. </footer>
  144. </body>
  145. </html>

购物车css代码

  1. /*列表*/
  2. .head {
  3.     width: 1020px;
  4.     align-self: center;
  5.     display: flex;
  6.     margin: 20px auto;
  7. }
  8. .head > img {
  9.     width: 120px;
  10.     height: 42px;
  11.     display: block;
  12.     margin-left: 20px;
  13. }
  14. .head > span {
  15.     height: 42px;
  16.     line-height: 42px;
  17.     font-size: 20px;
  18.     margin-left: 24px;
  19.     /* font-weight: bold; */
  20. }
  21. .headline {
  22.     width: 1020px;
  23.     height: 40px;
  24.     background-color: #f3f3f3;
  25.     margin: 20px auto;
  26.     border: 1px solid #e7e7e7;
  27.     position: relative;
  28. }
  29. .headline > label {
  30.     width: 30px;
  31.     line-height: 40px;
  32.     text-align: center;
  33.     position: absolute;
  34.     left: 1px;
  35. }
  36. .headline > span:nth-of-type(1) {
  37.     width: 90px;
  38.     line-height: 40px;
  39.     padding-left: 10px;
  40.     position: absolute;
  41.     left: 12px;
  42. }
  43. .headline > span:nth-of-type(2) {
  44.     width: 420px;
  45.     line-height: 40px;
  46.     padding-left: 10px;
  47.     position: absolute;
  48.     left: 140px;
  49. }
  50. .headline > span:nth-of-type(3) {
  51.     width: 110px;
  52.     line-height: 40px;
  53.     text-align: right;
  54.     padding-right: 10px;
  55.     position: absolute;
  56.     left: 300px;
  57. }
  58. .headline > span:nth-of-type(4) {
  59.     width: 110px;
  60.     line-height: 40px;
  61.     text-align: center;
  62.     position: absolute;
  63.     right: 260px;
  64. }
  65. .headline > span:nth-of-type(5) {
  66.     width: 110px;
  67.     line-height: 40px;
  68.     text-align: center;
  69.     padding-right: 10px;
  70.     position: absolute;
  71.     right: 140px;
  72. }
  73. .headline > span:nth-of-type(6) {
  74.     width: 110px;
  75.     line-height: 40px;
  76.     padding-left: 10px;
  77.     text-align: center;
  78.     position: absolute;
  79.     right: 44px;
  80. }
  81. .headline > span:nth-of-type(7) {
  82.     line-height: 40px;
  83.     text-align: center;
  84.     position: absolute;
  85.     right: 3px;
  86. }
  87. /*购物车*/
  88. .content > .nav {
  89.     width: 1020px;
  90.     margin: 20px auto;
  91.     border: 1px solid #e7e7e7;
  92.     background-color: #fff4e8;
  93.     display: grid;
  94.     grid-template-columns: 30px 90px 210px 210px 110px 110px 110px 110px 40px;
  95.     grid-row-gap: 20px;
  96. }
  97. .content > .nav > label {
  98.     width: 30px;
  99.     text-align: center;
  100.     /* padding-top: 10px; */
  101.     margin: 10px 0;
  102. }
  103. .content > .nav > img {
  104.     width: 70px;
  105.     margin: 10px;
  106.     border: 1px solid #e7e7e7;
  107. }
  108. .content > .nav > span:nth-of-type(1) {
  109.     margin: 10px;
  110. }
  111. .content > .nav > span:nth-of-type(2) {
  112.     margin: 10px;
  113. }
  114. .content > .nav > span:nth-of-type(3) {
  115.     text-align: center;
  116.     margin: 10px;
  117. }
  118. .content > .nav > span:nth-of-type(4) {
  119.     text-align: center;
  120.     margin: 10px;
  121. }
  122. .content > .nav > span:nth-of-type(5) {
  123.     text-align: center;
  124.     margin: 10px;
  125. }
  126. .content > .nav > span:nth-of-type(6) {
  127.     text-align: center;
  128.     margin: 10px;
  129. }
  130. .foot {
  131.     width: 1020px;
  132.     height: 40px;
  133.     margin: 20px auto;
  134.     /* border: 1px solid #e7e7e7; */
  135.     background-color: #fff4e8;
  136.     display: grid;
  137.     grid-template-columns: 30px 40px 560px 100px 150px 100px;
  138.     /* grid-template-rows: 30px 30px; */
  139. }
  140. .foot > label {
  141.     line-height: 40px;
  142.     text-align: center;
  143. }
  144. .foot > span:first-of-type {
  145.     line-height: 40px;
  146.     text-align: center;
  147. }
  148. .foot > div > a {
  149.     line-height: 40px;
  150.     margin: 0 5px;
  151.     color: grey;
  152. }
  153. .foot > span:last-of-type {
  154.     line-height: 20px;
  155. }
  156. .foot > div > div {
  157.     line-height: 20px;
  158.     text-align: right;
  159.     margin-right: 10px;
  160. }
  161. .foot > a {
  162.     line-height: 40px;
  163.     color: white;
  164.     background-color: #e64347;
  165.     text-align: center;
  166.     font-size: 18px;
  167. }

3、结算页代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>结算页</title>
  6.     <link rel="stylesheet" href="dome2.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <div 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.     </div>
  21. </header>
  22. <div class="main">
  23.     <div class="head">
  24.         <a href=""><img src="static/images/logo.png" alt=""></a>
  25.     </div>
  26.     <!--收货地址-->
  27.     <div class="head-one">
  28.         <h1>确认收货地址</h1>
  29.         <a href="">管理收货地址</a>
  30.     </div>
  31.     <div class="head-two">
  32.            <div class="head-tad">
  33.               <span class="head-nex">
  34.                 <b>山东省山东市神州区百威镇周先生183*****65</b>
  35.               </span>
  36.            </div>
  37.            <div>
  38.               <a href="">修改本地地址</a>
  39.            </div>
  40.     </div>
  42.     <!--订单信息-->
  43.     <div class="headline">
  44.         <div class="headline-one">
  45.         <h2><b>确认订单信息</b></h2>
  46.         </div>
  48.     </div>
  49.     <div class="nav">
  50.         <input name="search" type="checkbox" value=""><label for="search"></label>
  51.         <img src="imges/1.jpg.下载" alt="">
  52.         <span> 杉城 网红休闲零食大礼包一整箱送女友女生儿童礼盒美食品超市</span>
  53.         <span>零食大礼包</span>
  54.         <span>￥109.9</span>
  55.         <span>
  56.                 <select>
  57.                     <option value="1">1</option>
  58.                     <option value="2">2</option>
  59.                     <option value="3">3</option>
  60.                 </select>
  61.             </span>
  62.         <span>109.9</span>
  63.     </div>
  64.     <div class="nav-1">
  65.         <div class="nav-2">
  66.             <span>
  67.                 <input type="checkbox">
  68.             </span>
  69.             <span>朋友代付</span>
  70.         </div>
  71.         <div class="nav-3">
  72.             <span>
  73.                 <input type="checkbox">
  74.             </span>
  75.             <span>匿名购买</span>
  76.         </div>
  77.     </div>
  78.     <div class="box">
  79.         <div class="box-war">
  80.             <div class="box-she">
  81.                 <span>实付款：</span>
  82.                 <span>¥</span>
  83.                 <span>109.9</span>
  84.             </div>
  85.             <div class="box-ord">
  86.                 <span>寄送至：</span>
  87.                 <span>山东省 山东市 神州区 百威镇</span>
  88.             </div>
  89.             <div class="box-conf">
  90.                 <span>收货人</span>
  91.                 <span>183*****65</span>
  92.             </div>
  93.         </div>
  94.     </div>
  95.     <div class="foot">
  96.         <div class="foot-wrap">
  97.             <button>提交订单</button>
  98.         </div>
  99.     </div>
  100. </div>
  101. <footer class="public-footer">
  102.     <div>
  103.         <a href="">简介</a>
  104.         <a href="">联系我们</a>
  105.         <a href="">招聘信息</a>
  106.         <a href="">友情链接</a>
  107.         <a href="">用户服务协议</a>
  108.         <a href="">隐私权声明</a>
  109.         <a href="">法律投诉声明</a>
  110.     </div>
  111.     <div><span>LOGO</span></div>
  112.     <div>
  113.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  114.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  115.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  116.     </div>
  117.     <div>
  118.         <p>关注公众号</p>
  119.         <img src="static/images/erwei-code.png" alt="">
  120.     </div>
  122. </body>
  123. </html>

结算页css代码

  1. .main{
  2.     width: 1000px;
  3.     margin: auto;
  4. }
  5. .main > .head {
  6.     width: 1000px;
  7.     height: 70px;
  8.     position: relative;
  9. }
  10. .main > .head > a > img {
  11.     width: 170px;
  12.     height: 70px;
  13.     position: absolute;
  14. }
  16. /*收货地址*/
  17. .main > .head-one {
  18.     width: 1000px;
  19.     height: 60px;
  20.     display: flex;
  21.     justify-content: space-between;
  22.     border-bottom:1px solid #cccccc;
  23.     line-height: 60px;
  24. }
  25. .main > .head-one > h1 {
  26.     font-size: 16px;
  27. }
  29. .head-two {
  30.     width: 1000px;
  31.     height: 60px;
  32.     display: flex;
  33.     justify-content: space-between;
  34.     line-height: 60px;
  35. }
  36. .head-two > .head-tad {
  37.     margin: 10px;
  38.     font-size: 16px;
  39. }
  40. .head-two > div {
  41.     margin-right: 10px;
  42.     font-size: 16px;
  43. }
  44. /*订单信息*/
  45. .main > .headline {
  46.     width: 1000px;
  47. }
  48. .main > .headline > .headline-one > h2{
  49.     font-size: 16px;
  50.     color: black;
  51.     margin-left: 10px;
  52.     border-bottom: 1px solid #178cee;
  53. }
  55. /*产品*/
  56. .main > .nav {
  57.     width: 1000px;
  58.     margin: 20px auto;
  59.     border: 1px solid #e7e7e7;
  60.     background-color: #fff4e8;
  61.     display: grid;
  62.     grid-template-columns: 30px 90px 210px 210px 110px 110px 110px 110px 40px;
  63.     grid-row-gap: 20px;
  64. }
  65. .main > .nav > label {
  66.     width: 30px;
  67.     text-align: center;
  68.     /* padding-top: 10px; */
  69.     margin: 10px 0;
  70. }
  71. .main > .nav > img {
  72.     width: 70px;
  73.     margin: 10px;
  74.     border: 1px solid #e7e7e7;
  75. }
  76. .main > .nav > span:nth-of-type(1) {
  77.     margin: 10px;
  78. }
  79. .main > .nav > span:nth-of-type(2) {
  80.     margin: 10px;
  81. }
  82. .main > .nav > span:nth-of-type(3) {
  83.     text-align: center;
  84.     margin: 10px;
  85. }
  86. .main > .nav > span:nth-of-type(4) {
  87.     text-align: center;
  88.     margin: 10px;
  89. }
  90. .main > .nav > span:nth-of-type(5) {
  91.     text-align: center;
  92.     margin: 10px;
  93. }
  94. .main > .nav > span:nth-of-type(6) {
  95.     text-align: center;
  96.     margin: 10px;
  97. }
  98. /*结算方式*/
  99. .main > .nav-1 {
  100.     width: 1000px;
  101.     display: flex;
  102.     justify-content: flex-end;
  103. }
  104. .main > .nav-1 > .nav-2 > span {
  105.     font-size: 14px;
  106. }
  107. .main > .nav-1 > .nav-2 > span:last-of-type{
  108.     margin-right: 20px;
  109. }
  110. .main > .nav-1 > .nav-3 > span {
  111.     font-size: 14px;
  112. }
  113. .main > .nav-1 > .nav-3 > span:last-of-type{
  114.     margin-right: 3px;
  115. }
  117. /*结算金额方式*/
  118. .box{
  119.     width: 1000px;
  120.     display: flex;
  121.     justify-content: flex-end;
  122. }
  123. .box > .box-war {
  124.     width: 385px;
  125.     height: 125px;
  126.     border: 1px solid red;
  127.     text-align: right;
  128. }
  129. .box > .box-war > .box-she {
  130.     height: 50px;
  131.     line-height: 50px;
  132.     margin-right: 10px;
  133. }
  134. .box > .box-war > .box-she > span:first-of-type{
  135.     font-size: 15px;
  136.     color: #2b2b2b;
  137. }
  138. .box > .box-war > .box-she > span:nth-of-type(2){
  139.     font-size: 25px;
  140.     color: #555555;
  141. }
  142. .box > .box-war > .box-she > span:nth-of-type(3){
  143.     font-size: 25px;
  144.     color: red;
  145. }
  146. .box > .box-war > .box-ord {
  147.     height: 25px;
  148.     line-height: 25px;
  149.     margin-right: 10px;
  150. }
  151. .box > .box-war > .box-ord > span:first-of-type{
  152.     font-size: 13px;
  153.     color: black;
  154. }
  155. .box > .box-war > .box-ord > span:last-of-type {
  156.     font-size: 13px;
  157.     color: black;
  158.     margin-bottom: 5px;
  159. }
  160. .box > .box-war > .box-conf {
  161.     height: 25px;
  162.     line-height: 25px;
  163.     margin-right: 10px;
  164. }
  165. .box > .box-war > .box-conf > span:first-of-type {
  166.     font-size: 13px;
  167.     color: #2b2b2b;
  168.     margin-top: 5px;
  169. }
  170. .box > .box-war > .box-conf > span:last-of-type {
  171.     font-size: 13px;
  172.     color: #2b2b2b;
  173.     margin-top: 5px;
  174. }
  175. /*提交按钮*/
  177. .foot {
  178.     width: 1000px;
  179.     display: flex;
  180.     justify-content: flex-end;
  181. }
  182. .foot > .foot-wrap > button {
  183.     width: 180px;
  184.     height: 40px;
  185.     background-color: #df5000;
  186.     outline: none;
  187. }
  188. .foot > .foot-wrap > button:hover{
  189.     cursor: pointer;
  190. }

4、总结
标签运用不熟练，什么地方该用什么标签概念比较迷糊。以前学的定位有点遗忘，知识掌握不扎实，grid命名之后不太会套用，网格布局还需要加强。

上一条：CSS第一课下一条：flex实战-Php第十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多