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

博客列表 >Grid+Flex布局制作京东商城购物车、结算页静态页面，拼接头尾-20191231作业

Grid+Flex布局制作京东商城购物车、结算页静态页面，拼接头尾-20191231作业

涡流
涡流原创
2020年01月01日 23:33:491017浏览



购物车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，是否某些场景其他标签更适用？
前几节课写代码的时间比较多，如果可以，更希望老师对思路分析讲解得更详细些，再比如一个项目有多种方案实现，各种方案的优劣等等。

上一条：《Flex实战操作》2019-12-25作业笔记下一条：html页面布局实战-grid属性应用—PHP培训第十期
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多