Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid+Flex布局制作京东商城购物车、结算页静态页面，拼接头尾-20191231作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4788
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Grid+Flex布局制作京东商城购物车、结算页静态页面，拼接头尾-20191231作业
涡流
Original
1025 people have browsed it



购物车html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--引入阿里字体图标库的css-->
  6.     <link rel="stylesheet" href="../../iconfont/iconfont.css">
  7.     <link rel="stylesheet" href="../css/head.css">
  8.     <link rel="stylesheet" href="../css/foot.css">
  9.     <link rel="stylesheet" href="../css/shopping.css">
  10.     <title>购物车拼接页面</title>
  11. </head>
  12. <body>
  13.     <!-- 头部html代码 -->
  14.     <!-- 头部分为左右两部分 -->
  15.     <header>
  16.         <!-- 左侧全部设定为a标签 -->
  17.         <div class="left">
  18.             <a href="">网站首页</a>
  19.             <a href="">专题</a>
  20.             <a href="">网站导航</a>
  21.             <a href="">二手商品</a>
  22.             <a href="">讨论区</a>
  23.         </div>
  24.         <!-- 右侧没有什么特殊说明的 -->
  25.         <div class="right">
  26.             <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  27.             <a href="">免费注册</a>
  28.         </div>
  29.     </header>
  31.     <!-- 购物车html代码 -->
  32.     <!-- LOGO头部 -->
  33.     <div class="head">
  34.         <img src="../img/logo.png" alt="">
  35.         <span>购物车</span>
  36.     </div>
  38.     <!-- 标题栏，1行7列 -->
  39.     <div class="title">
  40.         <label><input name="all" type="checkbox" value=""></label>
  41.         <span>全选</span>
  42.         <span>商品</span>
  43.         <span>单价</span>
  44.         <span>数量</span>
  45.         <span>小计</span>
  46.         <span>操作</span>
  47.     </div>
  48.     <!-- <hr> -->
  49.     <!-- 购物车，N行8列 -->
  50.     <div class="content">
  51.         <div class="list">
  52.             <label><input name="select" type="checkbox" value=""></label>
  53.             <img src="../img/cpu.jpg" alt="">
  54.             <span>英特尔（Intel）i7-9700K 酷睿八核 盒装CPU处理器</span>
  55.             <span>i7-9700K★3.6GHz★8核★8线程</span>
  56.             <span>￥2889.00</span>
  57.             <span>
  58.                 <select>
  59.                     <option value="1">1</option>
  60.                     <option value="2">2</option>
  61.                     <option value="3">3</option>
  62.                 </select>
  63.             </span>
  64.             <span>￥2889.00</span>
  65.             <span>删除</span>
  66.         </div>
  67.         <div class="list">
  68.             <label><input name="select" type="checkbox" value=""></label>
  69.             <img src="../img/ssd.jpg" alt="">
  70.             <span>英特尔（Intel）760P系列 2TB NVMe M.2 2280接口 SSD固态硬盘</span>
  71.             <span>760P系列（NVMe）M.2接口</span>
  72.             <span>￥4099.00</span>
  73.             <span>
  74.                 <select>
  75.                     <option value="1">1</option>
  76.                     <option value="2">2</option>
  77.                     <option value="3">3</option>
  78.                 </select>
  79.             </span>
  80.             <span>￥4099.00</span>
  81.             <span>删除</span>
  82.         </div>
  83.         <div class="list">
  84.             <label><input name="select" type="checkbox" value=""></label>
  85.             <img src="../img/keyboard.jpg" alt="">
  86.             <span>樱桃（CHERRY）MX8.0 G80-3888HUAEU-2 机械键盘 有线键盘</span>
  87.             <span>黑色RGB，黑轴</span>
  88.             <span>￥1679.00</span>
  89.             <span>
  90.                 <select>
  91.                     <option value="1">1</option>
  92.                     <option value="2">2</option>
  93.                     <option value="3">3</option>
  94.                 </select>
  95.             </span>
  96.             <span>￥1679.00</span>
  97.             <span>删除</span>
  98.         </div>
  99.     </div>
  101.     <!-- 底部结算栏，1行6列，grid -->
  102.     <div class="foot">
  103.         <label><input name="all" type="checkbox" value=""></label>
  104.         <span>全选</span>
  105.         <div>
  106.             <a href="">删除选中商品</a>
  107.             <a href="">移到关注</a>
  108.             <a href="">清理购物车</a>
  109.         </div>
  110.         <span>已选择 3 件商品</span>
  111.         <div>
  112.             <div>总价：￥ 8667.00</div>
  113.             <div>促销：-￥0.00</div>
  114.         </div>
  115.         <a href="">去结算</a>
  116.     </div>
  117.     <!-- 底部html代码 -->
  118.     <!-- 分为左右两侧 -->
  119.     <footer>
  120.         <div class="left">
  121.             <!-- 左侧链接部分 -->
  122.             <div class="link">
  123.                 <a href="">简介</a>
  124.                 <a href="">联系我们</a>
  125.                 <a href="">招聘信息</a>
  126.                 <a href="">友情链接</a>
  127.                 <a href="">用户服务协议</a>
  128.                 <a href="">隐私权声明</a>
  129.                 <a href="">法律投诉声明</a>
  130.             </div>
  131.             <!-- 左侧公司信息 -->
  132.             <div class="info">
  133.                 <i class="iconfont icon-dingwei"></i>
  134.                 <span>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</span>
  135.                 <span>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</span>
  136.                 <span>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</span>
  137.             </div>
  138.         </div>
  139.         <!-- 右侧公众号二维码 -->
  140.         <div class="right">
  141.             <div>关注公众号</div>
  142.             <img src="../img/code.png" alt="">
  143.         </div>
  144.     </footer>
  146. </body>
  147. </html>

购物车CSS代码：

  1. @import "reset.css";
  3. body {
  4.     /* width: 980px; */
  5.     margin: 0 auto;
  6. }
  8. .head {
  9.     width: 980px;
  10.     align-self: center;
  11.     display: flex;
  12.     margin: 20px auto;
  13. }
  14. .head > img {
  15.     width: 120px;
  16.     height: 42px;
  17.     display: block;
  18.     margin-left: 20px;
  19. }
  21. .head > span {
  22.     height: 42px;
  23.     line-height: 42px;
  24.     font-size: 20px;
  25.     margin-left: 24px;
  26.     /* font-weight: bold; */
  27. }
  29. .title {
  30.     width: 980px;
  31.     height: 40px;
  32.     display: flex;
  33.     background-color: #f3f3f3;
  34.     margin: 20px auto;
  35.     border: 1px solid #e7e7e7;
  36. }
  38. .title > label {
  39.     width: 30px;
  40.     line-height: 40px;
  41.     text-align: center;
  42. }
  44. .title > span:nth-of-type(1) {
  45.     width: 90px;
  46.     line-height: 40px;
  47.     padding-left: 10px;
  48. }
  50. .title > span:nth-of-type(2) {
  51.     width: 420px;
  52.     line-height: 40px;
  53.     padding-left: 10px;
  54. }
  56. .title > span:nth-of-type(3) {
  57.     width: 110px;
  58.     line-height: 40px;
  59.     text-align: right;
  60.     padding-right: 10px;
  61. }
  63. .title > span:nth-of-type(4) {
  64.     width: 110px;
  65.     line-height: 40px;
  66.     text-align: center;
  67. }
  69. .title > span:nth-of-type(5) {
  70.     width: 110px;
  71.     line-height: 40px;
  72.     text-align: right;
  73.     padding-right: 10px;
  74. }
  76. .title > span:nth-of-type(6) {
  77.     width: 110px;
  78.     line-height: 40px;
  79.     padding-left: 10px;
  80. }
  82. .content > .list {
  83.     width: 980px;
  84.     margin: 20px auto;
  85.     border: 1px solid #e7e7e7;
  86.     background-color: #fff4e8;
  87.     display: grid;
  88.     grid-template-columns: 30px 90px 210px 210px 110px 110px 110px 110px;
  89.     grid-row-gap: 20px;
  90. }
  92. .content > .list > label {
  93.     width: 30px;
  94.     text-align: center;
  95.     /* padding-top: 10px; */
  96.     margin: 10px 0;
  97. }
  99. .content > .list > img {
  100.     width: 70px;
  101.     margin: 10px;
  102.     border: 1px solid #e7e7e7;
  103. }
  105. .content > .list > span:nth-of-type(1) {
  106.     margin: 10px;
  107. }
  109. .content > .list > span:nth-of-type(2) {
  110.     margin: 10px;
  111. }
  113. .content > .list > span:nth-of-type(3) {
  114.     text-align: right;
  115.     margin: 10px;
  116. }
  118. .content > .list > span:nth-of-type(4) {
  119.     text-align: center;
  120.     margin: 10px;
  121. }
  123. .content > .list > span:nth-of-type(5) {
  124.     text-align: right;
  125.     margin: 10px;
  126. }
  128. .content > .list > span:nth-of-type(6) {
  129.     margin: 10px;
  130. }
  132. .foot {
  133.     width: 980px;
  134.     height: 40px;
  135.     margin: 20px auto;
  136.     /* border: 1px solid #e7e7e7; */
  137.     background-color: #fff4e8;
  138.     display: grid;
  139.     grid-template-columns: 30px 40px 560px 100px 150px 100px;
  140.     /* grid-template-rows: 30px 30px; */
  141. }
  143. .foot > label {
  144.     line-height: 40px;
  145.     text-align: center;
  146. }
  148. .foot > span:first-of-type {
  149.     line-height: 40px;
  150.     text-align: center;
  151. }
  153. .foot > div > a {
  154.     line-height: 40px;
  155.     margin: 0 5px;
  156.     color: grey;
  157. }
  159. .foot > span:last-of-type {
  160.     line-height: 20px;
  161. }
  163. .foot > div > div {
  164.     line-height: 20px;
  165.     text-align: right;
  166.     margin-right: 10px;
  167. }
  169. .foot > a {
  170.     line-height: 40px;
  171.     color: white;
  172.     background-color: #e64347;
  173.     text-align: center;
  174.     font-size: 18px;
  175. }

结算页html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--引入阿里字体图标库的css-->
  6.     <link rel="stylesheet" href="../../iconfont/iconfont.css">
  7.     <link rel="stylesheet" href="../css/pay.css">
  8.     <link rel="stylesheet" href="../css/head.css">
  9.     <link rel="stylesheet" href="../css/foot.css">
  10.     <title>结算页拼接页面</title>
  11. </head>
  12. <body>
  14.     <!-- 头部分为左右两部分 -->
  15.     <header>
  16.         <!-- 左侧全部设定为a标签 -->
  17.         <div class="left">
  18.             <a href="">网站首页</a>
  19.             <a href="">专题</a>
  20.             <a href="">网站导航</a>
  21.             <a href="">二手商品</a>
  22.             <a href="">讨论区</a>
  23.         </div>
  24.         <!-- 右侧没有什么特殊说明的 -->
  25.         <div class="right">
  26.             <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  27.             <a href="">免费注册</a>
  28.         </div>
  29.     </header>
  31.     <!-- <span class="iconfont icon-huiyuan1"></span> -->
  32.     <div class="pay">
  33.         <div class="title">
  34.             <img src="../img/logo.png" alt="">
  35.             <span>结算页</span>
  36.         </div>
  37.         <div class="address">
  38.             <div class="add-head">
  39.                 <span>收货人信息</span>
  40.                 <a href="">新增收货地址</a>
  41.             </div>
  42.             <div class="add-info">
  43.                 <span>王守仁 浙江</span>
  44.                 <span>王守仁</span>
  45.                 <span>浙江 宁波市 余姚区 武胜门路</span>
  46.                 <span>13905745678</span>
  47.                 <span>默认地址</span>
  48.             </div>
  49.         </div>
  50.         <div class="pay-type">
  51.             <div>支付方式</div>
  52.             <div>
  53.                 <span>货到付款</span>
  54.                 <span>在线支付</span>
  55.             </div>
  56.         </div>
  57.         <div class="list-title">
  58.             <span>送货清单</span>
  59.             <a href="">价格说明</a>
  60.             <a href="">返回修改购物车</a>
  61.         </div>
  62.         <div class="delivery-title">
  63.             <span>配送方式</span>
  64.             <a href="">对应商品</a>
  65.             <span>商家：京东自营</span>
  66.         </div>
  67.         <div class="content">
  68.             <div class="delivery">
  69.                 <span>京东快递</span>
  70.                 <span>配送时间：工作日、双休日与节假日均可送货</span>
  71.             </div>
  72.             <div class="goods">
  73.                 <img src="../img/cpu.jpg" alt="">
  74.                 <div>
  75.                     <span>英特尔（Intel）i7-9700K 酷睿八核 盒装CPU处理器</span>
  76.                     <span>i7-9700K★3.6GHz★8核★8线程</span>
  77.                 </div>
  78.                 <div>
  79.                     <span>￥ 2889.00</span>
  80.                     <span>0.080kg</span>
  81.                 </div>
  82.                 <div>x1</div>
  83.                 <div>有货</div>
  84.             </div>
  85.             <div class="goods">
  86.                 <img src="../img/ssd.jpg" alt="">
  87.                 <div>
  88.                     <span>英特尔（Intel）760P系列 2TB NVMe M.2 2280接口 SSD固态硬盘</span>
  89.                     <span>760P系列（NVMe）M.2接口</span>
  90.                 </div>
  91.                 <div>
  92.                     <span>￥ 4099.00</span>
  93.                     <span>0.080kg</span>
  94.                 </div>
  95.                 <div>x1</div>
  96.                 <div>有货</div>
  97.             </div>
  98.             <div class="goods">
  99.                 <img src="../img/keyboard.jpg" alt="">
  100.                 <div>
  101.                     <span>樱桃（CHERRY）MX8.0 G80-3888HUAEU-2 机械键盘 有线键盘</span>
  102.                     <span>黑色RGB，黑轴</span>
  103.                 </div>
  104.                 <div>
  105.                     <span>￥ 1679.00</span>
  106.                     <span>2.370kg</span>
  107.                 </div>
  108.                 <div>x1</div>
  109.                 <div>有货</div>
  110.             </div>
  111.         </div>
  112.         <div class="summary">
  113.             <span>3件商品，总商品额：</span>
  114.             <i>￥ 8667.00</i>
  115.             <span>运费：</span>
  116.             <i>￥ 0.00</i>
  117.             <span>应付总额：</span>
  118.             <i>￥ 8667.00</i>
  119.         </div>
  120.         <div class="submit">提交订单</div>
  121.     </div>
  123.     <!-- 分为左右两侧 -->
  124.     <footer>
  125.         <div class="left">
  126.             <!-- 左侧链接部分 -->
  127.             <div class="link">
  128.                 <a href="">简介</a>
  129.                 <a href="">联系我们</a>
  130.                 <a href="">招聘信息</a>
  131.                 <a href="">友情链接</a>
  132.                 <a href="">用户服务协议</a>
  133.                 <a href="">隐私权声明</a>
  134.                 <a href="">法律投诉声明</a>
  135.             </div>
  136.             <!-- 左侧公司信息 -->
  137.             <div class="info">
  138.                 <i class="iconfont icon-dingwei"></i>
  139.                 <span>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</span>
  140.                 <span>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</span>
  141.                 <span>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</span>
  142.             </div>
  143.         </div>
  144.         <!-- 右侧公众号二维码 -->
  145.         <div class="right">
  146.             <div>关注公众号</div>
  147.             <img src="../img/code.png" alt="">
  148.         </div>
  149.     </footer>
  151. </body>
  152. </html>

结算页css代码：

  1. @import "reset.css";
  3. body {
  4.     /* width: 980px; */
  5.     margin: 0 auto;
  6.     color: #333333;
  7. }
  9. a {
  10.     color: #1F5ea8;
  11. }
  13. .pay {
  14.     width: 980px;
  15.     /* background-color: #f3f3f3; */
  16.     margin: 20px auto;
  17.     display: grid;
  18.     grid-template-columns: 980px;
  19.     grid-row-gap: 30px;
  20.     /* border: 1px solid #e7e7e7; */
  21. }
  23. .pay > .title {
  24.     /* width: 980px; */
  25.     align-self: center;
  26.     display: flex;
  27.     margin-top: 20px;
  28. }
  29. .pay > .title > img {
  30.     width: 120px;
  31.     height: 42px;
  32.     display: block;
  33.     margin-left: 20px;
  34. }
  36. .pay > .title > span {
  37.     height: 42px;
  38.     line-height: 42px;
  39.     font-size: 20px;
  40.     margin-left: 24px;
  41.     /* font-weight: bold; */
  42. }
  44. .pay > .address > .add-head {
  45.     height: 60px;
  46.     display: flex;
  47.     justify-content: space-between;
  48. }
  50. .pay > .address > .add-head > span {
  51.     height: inherit;
  52.     line-height: 60px;
  53.     font-weight: bold;
  54.     margin-left: 20px;
  55. }
  57. .pay > .address > .add-head > a {
  58.     height: inherit;
  59.     line-height: 60px;
  60.     margin-right: 20px;
  61. }
  63. .pay > .address > .add-info {
  64.     display: flex;
  65.     height: 40px;
  66. }
  68. .pay > .address > .add-info > span:first-of-type {
  69.     height: inherit;
  70.     line-height: 40px;
  71.     margin-left: 20px;
  72.     padding: 0 30px;
  73.     border: 2px solid red;
  74. }
  76. .pay > .address > .add-info > span:not(:first-of-type) {
  77.     height: inherit;
  78.     line-height: 40px;
  79.     margin-left: 40px;
  80. }
  82. .pay > .address > .add-info > span:last-of-type {
  83.     height: 24px;
  84.     line-height: 24px;
  85.     margin: 8px 0 8px 40px;
  86.     padding: 0 5px;
  87.     background-color: #9a9999;
  88.     color: white;
  89. }
  91. .pay > .pay-type {
  92.     border-top: 1px solid #e3e4e5;
  93. }
  95. .pay > .pay-type > div:first-of-type {
  96.     height: 60px;
  97.     line-height: 60px;
  98.     margin-left: 20px;
  99.     font-weight: bold;
  100. }
  102. .pay > .pay-type > div:last-of-type {
  103.     display: flex;
  104.     /* height: 40px; */
  105. }
  107. .pay > .pay-type > div:last-of-type > span {
  108.     height: 40px;
  109.     line-height: 40px;
  110.     margin-left: 20px;
  111.     padding: 0 30px;
  112.     border: 2px solid red;
  113. }
  115. /* 送货清单 */
  116. .pay > .list-title {
  117.     height: 60px;
  118.     border-top: 1px solid #e3e4e5;
  119.     display: flex;
  120. }
  122. .pay > .list-title > span {
  123.     height: inherit;
  124.     line-height: 60px;
  125.     font-weight: bold;
  126.     margin-left: 20px;
  127.     margin-right: 600px;
  128. }
  130. .pay > .list-title > a {
  131.     height: inherit;
  132.     line-height: 60px;
  133.     margin-left: 60px;
  134.     margin-right: 20px;
  135. }
  137. /* 配送方式 */
  138. .pay > .delivery-title {
  139.     /* height: 60px; */
  140.     display: flex;
  141. }
  143. .pay > .delivery-title > span {
  144.     /* height: 60px; */
  145.     /* line-height: 60px; */
  146.     margin-left: 20px;
  147. }
  149. .pay > .delivery-title > a {
  150.     /* height: 60px; */
  151.     /* line-height: 60px; */
  152.     margin: 0 20px 0 120px;
  153. }
  155. .pay > .content {
  156.     display: grid;
  157.     grid-template-columns: 280px 700px;
  158.     grid-template-areas: "delivery goods1" "delivery goods2" "delivery goods3";
  159.     grid-row-gap: 20px;
  160. }
  162. .pay > .content > .delivery {
  163.     grid-area: delivery;
  164.     display: flex;
  165.     flex-direction: column;
  166. }
  168. .pay > .content > .delivery > span:first-of-type {
  169.     width: 160px;
  170.     height: 40px;
  171.     line-height: 40px;
  172.     margin-left: 20px;
  173.     /* padding: 0 30px; */
  174.     border: 2px solid red;
  175.     text-align: center;
  176. }
  178. .pay > .content > .delivery > span:last-of-type {
  179.     margin: 20px;
  180.     font-size: 0.9rem;
  181. }
  183. .pay > .content > .goods {
  184.     display: flex;
  185.     justify-content: space-between;
  186. }
  188. .pay > .content > .goods > img {
  189.     width: 80px;
  190.     height: 80px;
  191.     border: 1px solid #e7e7e7;
  192. }
  194. .pay > .content > .goods > div:first-of-type {
  195.     width: 250px;
  196. }
  198. .pay > .content > .goods > div:nth-of-type(2) {
  199.     width: 100px;
  200.     text-align: right;
  201. }
  203. .pay > .content > .goods > div:nth-of-type(3) {
  204.     width: 30px;
  205.     text-align: right;
  206. }
  208. .pay > .content > .goods > div:nth-of-type(4) {
  209.     width: 60px;
  210.     text-align: center;
  211. }
  213. .pay > .summary {
  214.     display: grid;
  215.     grid-template-columns: 1fr 120px;
  216.     grid-row-gap: 20px;
  217.     border-top: 1px solid #e3e4e5;
  218.     padding-top: 20px;
  219. }
  221. .pay > .summary > span {
  222.     text-align: right;
  223. }
  225. .pay > .summary > i {
  226.     text-align: right;
  227.     margin-right: 20px;
  228. }
  230. .pay > .summary > i:last-of-type {
  231.     font-size: 1.35rem;
  232.     color: red;
  233. }
  235. /* 提交订单 */
  236. .pay > .submit {
  237.     width: 120px;
  238.     height: 40px;
  239.     line-height: 40px;
  240.     font-size: 18px;
  241.     font-weight: bold;
  242.     background-color: #e64347;
  243.     text-align: center;
  244.     color: white;
  245.     margin-left: auto;
  246. }

对grid和flex有些初步的认识，但只停留在单行或单列用代码少些的flex，多行多列用grid的程度。稍微复杂的grid整体布局还得纸笔来配合。
现在用到的标签只有div、span、a、i，是否某些场景其他标签更适用？
前几节课写代码的时间比较多，如果可以，更希望老师对思路分析讲解得更详细些，再比如一个项目有多种方案实现，各种方案的优劣等等。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你们现在还没有到去评价哪种方案优劣的阶段, 功能实现是第一位的, 不论是哪一种方案, 尽可能理解它, 否则给大家分析, 大家也听不明白的, 你说是不是?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post