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

博客列表 >12月31日作业：仿京东购物车和结算页

12月31日作业：仿京东购物车和结算页

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年01月02日 15:07:031678浏览

作业一：
1、京东购物车：

分析：原计划grid布局但考虑到grid布局只能控制子代元素，而每个商品又属于1条（模板）信息，直接通过grid布局，一条商品信息不方便后期统一调整，整体通过flex布局，然后每条产品信息grid布局（单行）可以通过画竖线很好的控制宽度。
2、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="shopping_trolley.css">
  6.     <title>购物车案例</title>
  7. </head>
  8. <body>
  9. <div 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 calss="iconfont icon-huiyuan2"></i>登陆</a>
  17.         <a href=""><i>免费注册</i></a>
  18.     </span>
  19. </div>
  20. <div class="shopping-trolley">
  21.     <div class="logo-search">
  22.         <div class="jd-logo">
  23.             <a href=""><img src="../../static/images/logo.png" alt=""></a>
  24.             <span>购物车</span>
  25.         </div>
  26.         <div class="search">
  27.             <input type="search" name="" id="search">
  28.             <button><label for="search">搜索</label></button>
  29.         </div>
  30.     </div>
  31.     <div class="trolley">
  32.         <div class="head">
  33.             <span>全部商品 3</span>
  34.             <div class="address">
  35.                 <span>配送至：</span>
  36.                 <select name="" id="">
  37.                     <option value="">北京市长安路1号</option>
  38.                     <option value="">郑州市金水区长安路1号</option>
  39.                     <option value="">洛阳市新安县金斗路1号</option>
  40.                 </select>
  41.             </div>
  42.         </div>
  43.         <div class="body">
  44.             <div class="top">
  45.                 <input type="checkbox" id="checked">
  46.                 <label for="checked">全选</label>
  47.                 <span>商品</span>
  48.                 <span>单价</span>
  49.                 <span>数量</span>
  50.                 <span>小计</span>
  51.                 <span>操作</span>
  52.             </div>
  53.             <div class="shop-list">
  54.                 <div class="shop">
  55.                     <div class="up">
  56.                         <input type="checkbox">
  57.                         <label for="">小米智联万物专卖店</label>
  58.                     </div>
  59.                     <div class="down" .>
  60.                         <input type="checkbox" >
  61.                         <a href=""><img src="../../static/images/shop1.jpg" alt=""></a>
  62.                         <div class="shop-describe">
  63.                             <sapn>产品描述</sapn>
  64.                             <br>
  65.                             <span>选服务</span>
  67.                         </div>
  68.                         <span>石头扫地机器人</span>
  69.                         <span>¥2499.00</span>
  70.                         <div>
  71.                             <input list="n" value="1"/>
  72.                                 <datalist id="n">
  73.                                     <option value="1">1</option>
  74.                                     <option value="2">3</option>
  75.                                     <option value="3">4</option>
  76.                                     <option value="4">5</option>
  77.                                 </datalist>
  78.                             <div>
  79.                                 <button>∧</button>
  80.                                 <button>∨</button>
  81.                             </div>
  82.                         </div>
  83.                         <span>¥2499.00</span>
  84.                         <span><a href="">删除</a></span>
  86.                     </div>
  87.                 </div>
  88.                 <div class="shop">
  89.                     <div class="up">
  90.                         <input type="checkbox">
  91.                         <label for="">小米智联万物专卖店</label>
  92.                     </div>
  93.                     <div class="down">
  94.                     <input type="checkbox" >
  95.                     <a href=""><img src="../../static/images/shop1.jpg" alt=""></a>
  96.                     <div class="div"    >
  97.                         <sapn>产品描述</sapn>
  98.                         <br>
  99.                         <span>选服务</span>
  101.                     </div>
  102.                     <span>石头扫地机器人</span>
  103.                     <span>¥2499.00</span>
  104.                     <div>
  105.                         <input list="n" />
  106.                         <datalist id="n2-2">
  107.                             <option value="">1</option>
  108.                             <option value="">3</option>
  109.                             <option value="">4</option>
  110.                             <option value="">5</option>
  111.                         </datalist>
  112.                         <div>
  113.                             <button>∧</button>
  114.                             <button>∨</button>
  115.                         </div>
  116.                     </div>
  117.                     <span>¥2499.00</span>
  118.                     <span><a href="">删除</a></span>
  120.                 </div>
  121.                     <div class="down">
  122.                     <input type="checkbox" >
  123.                     <a href=""><img src="../../static/images/shop1.jpg" alt=""></a>
  124.                     <div class="div"    >
  125.                         <sapn>产品描述</sapn>
  126.                         <br>
  127.                         <span>选服务</span>
  129.                     </div>
  130.                     <span>石头扫地机器人</span>
  131.                     <span>¥2499.00</span>
  132.                     <div>
  133.                         <input list="n" />
  134.                         <datalist id="n2">
  135.                             <option value="">1</option>
  136.                             <option value="">3</option>
  137.                             <option value="">4</option>
  138.                             <option value="">5</option>
  139.                         </datalist>
  140.                         <div>
  141.                             <button>∧</button>
  142.                             <button>∨</button>
  143.                         </div>
  144.                     </div>
  145.                     <span>¥2499.00</span>
  146.                     <span><a href="">删除</a></span>
  148.                 </div>
  149.                 </div>
  150.             </div>
  152.         </div>
  153.         <div class="bottom">
  154.             <div class="left">
  155.                 <input type="checkbox" id="ck">
  156.                 <label for="ck">全选</label>
  157.                 <a href="">删除选中商品</a>
  158.                 <a href="">移到关注</a>
  159.                 <a href="">清理购物车</a>
  160.             </div>
  161.             <div class="right">
  162.                 <span>已经选择3件商品</span>
  163.                 <div>
  164.                     <p>
  165.                         <span>总价</span>
  166.                         <span>¥2798.90</span>
  167.                     </p>
  168.                     <span>
  169.                             促销：-¥0.00
  170.                     </span>
  171.                 </div>
  172.                 <button>
  173.                     去结算
  174.                 </button>
  175.             </div>
  176.         </div>
  177.     </div>
  178. </div>
  179. <div class="public-footer">
  180.     <div class="nav">
  181.         <a href=""><span>链接1</span></a>
  182.         <a href=""><span>链接2</span></a>
  183.         <a href=""><span>链接3</span></a>
  184.         <a href=""><span>链接4</span></a>
  185.         <a href=""><span>链接5</span></a>
  186.         <a href=""><span>链接6</span></a>
  187.         <a href=""><span>链接7</span></a>
  188.     </div>
  189.     <div class="logo">
  190.         <a href=""><img src="../../static/images/logo.png" alt=""></a>
  191.     </div>
  192.     <div class="info">
  193.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  194.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  195.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  196.     </div>
  197.     <div>
  198.         <p>关注公众号</p>
  199.         <img src="../../static/images/erwei-code.png" alt="">
  200.     </div>
  201. </div>
  202. </body>
  203. </html>

3、css代码：

  1. @import "../../components/public_reset.css";
  2. @import "../../components/public/public_header/public_header.css";
  3. @import url(../../components/public/public_footer/public_footer.css);
  5. .shopping-trolley {
  6.     width: 1200px;
  7.     margin: 10px auto;
  8.     background-color: #fff;
  9.     padding: 10px;
  10.     box-sizing: border-box;
  11. }
  12. /*JD-logo/搜索框*/
  13. .shopping-trolley > .logo-search {
  14.     height: 100px;
  15.     display: flex;
  16.     flex-direction: row;
  17.     justify-content: space-between;
  18. }
  19. .shopping-trolley > .logo-search > * {
  20.     align-self: center;
  21. }
  22. .shopping-trolley > .logo-search > .jd-logo {
  23.     display: flex;
  24.     justify-content: space-between;
  25. }
  26. .shopping-trolley > .logo-search > .jd-logo span {
  27.     font-size:25px;
  28.     font-weight: bold;
  29.     margin-bottom: 10px;
  30.     align-self: flex-end;
  31. }
  32. .shopping-trolley > .logo-search > .search {
  33.     display: flex;
  34. }
  35. .shopping-trolley > .logo-search > .search > input {
  36.     width: 200px;
  37.     height: 30px;
  38.     border:2px solid red;
  39. }
  40. .shopping-trolley > .logo-search > .search > button  {
  41.     width: 40px;
  42.     height: 30px;
  43.     font-size: 16px;
  44.     background-color: #ff0000;
  45.     color:white;
  46.     text-align: center;
  47.     line-height:30px ;
  48.     cursor: pointer;
  49.     border:none;
  50. }
  51. .shopping-trolley > .logo-search > .search > button > label {
  52.     cursor: pointer;
  53. }
  55. .shopping-trolley > .trolley > .head {
  56.     display: flex;
  57.     justify-content: space-between;
  58.     align-items: center;
  60. }
  61. .shopping-trolley > .trolley > .head > span {
  62.     font-size: 20px;
  63.     font-weight: bold;
  64.     color:#ff0000;
  65.     border-bottom: 2px solid #ff0000;
  66.     padding-bottom: 8px;
  67. }
  68. .shopping-trolley > .trolley > .head > .address > select{
  69.     width: 200px;
  70. }
  72. .shopping-trolley > .trolley > .body {
  73.     display:flex ;
  74.     flex-direction: column;
  75. }
  77. .shopping-trolley > .trolley > .body > .top {
  78.     height: 40px;
  79.     background-color: #F3F3F3;
  80.     padding-left: 10px;
  81.     display: grid;
  82.     grid-template-columns:
  83.            0.3fr 1.4fr 6fr 1fr 1.5fr 1.5fr 1.5fr;
  84.     align-content:center;
  85.     align-items: end;
  87. }
  89. .shopping-trolley > .trolley > .body > .shop-list {
  90.     display: flex;
  91.     flex-direction: column;
  92. }
  93. .shopping-trolley > .trolley > .body > .shop-list > .shop > .up {
  94.     border-bottom: 2px solid #969896;
  95.     height: 40px;
  96.     display: flex;
  97.     padding-left: 10px;
  98.     align-items: center;
  99.     box-sizing: border-box;
  100. }
  101. .shopping-trolley > .trolley > .body > .shop-list > .shop > .up > label {
  102.     margin-left: 12px;
  103. }
  105. /*.shopping-trolley > .trolley > .body > .shop-list > .shop{*/
  106. /*    border:1px solid #b0b0b0 ;*/
  107. /*    border-top:none;*/
  108. /*}*/
  110. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down {
  111.     display: grid;
  112.     padding-left: 10px;
  113.     padding-bottom: 10px;
  114.     padding-top: 8px;
  115.     grid-template-columns:
  116.              0.3fr  1.4fr 3fr 3fr 1fr 1.5fr 1.5fr 1.5fr;
  117.     border:1px solid #F1F1F1 ;
  118.     border-top:none;
  119. }
  120. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down > :nth-child(3) > :last-child{
  121.     color: red;
  122. }
  124. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down > :nth-child(6) {
  125.     display: flex;
  127. }
  128. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down > :nth-child(6) > input {
  129.     width: 30px;
  130.     height: 18px;
  131. }
  132. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down > :nth-child(6) > div {
  133.     display: flex;
  134.     flex-direction: column;
  135. }
  136. .shopping-trolley > .trolley > .body > .shop-list > .shop > .down > :nth-child(6) > div > button{
  137.     height: 11px;
  138.     font-size: 6px;
  139.     line-height: 9px;
  140.     /*border-style: none;*/
  141. }
  142. .shopping-trolley > .trolley > .bottom {
  143.     height: 50px;
  144.     border-top:1px solid #969896;
  145.     border-bottom:1px solid #969896;
  146.     padding-left: 10px;
  147.     display: flex;
  148.     justify-content: space-between;
  149.     align-items: center;
  150. }
  152. .shopping-trolley > .trolley >  .bottom > .left > label {
  153.     margin-left: 12px;
  154. }
  155. .shopping-trolley > .trolley >  .bottom > .left > * {
  156.     margin-left: 5px;
  157. }
  158. .shopping-trolley > .trolley >  .bottom > .left > :last-child {
  159.     font-weight: bold;
  160. }
  161. .shopping-trolley > .trolley >  .bottom > .left > a:hover {
  162.     color:#ff0000;
  163. }
  164. .shopping-trolley > .trolley >  .bottom > .right {
  165.     display: flex;
  166.     color:#b0b0b0;
  167. }
  168. .shopping-trolley > .trolley >  .bottom > .right > * {
  169.     margin-left: 20px;
  170. }
  171. .shopping-trolley > .trolley >  .bottom > .right > :nth-child(2) > span {
  172.     color:#222222;
  173. }
  175. .shopping-trolley > .trolley > .bottom > .right > button {
  176.     width: 70px;
  177.     height: 50px;
  178.     border-style: none;
  179.     background-color: #ff0000;
  180.     color:white;
  181. }
  182. .shopping-trolley > .trolley > .bottom > .right > button:hover {
  183.     cursor: pointer;
  184. }

4、效果图：

作业二：

1、结算页分析
结算页通过分析上下通过flex布局快速实现，中部产品信息和配送方式利用grid布局实现
2、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="payment.css">
  6.     <title>结算页案例</title>
  7. </head>
  8. <body>
  9.     <div 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 calss="iconfont icon-huiyuan2"></i>登陆</a>
  17.             <a href=""><i>免费注册</i></a>
  18.         </span>
  19.     </div>
  21.     <div class="payment">
  22.         <div class="head">
  23.             <div class="paying-logo">
  24.                 <a href=""><img src="../../static/images/logo.png" alt=""></a>
  25.                 <span>结算页</span>
  26.             </div>
  27.             <img src="../../static/images/paying-right.png" alt="">
  28.         </div>
  29.         <h3>填写并核对订单信息</h3>
  30.         <div class="pay">
  31.             <div class="address">
  32.                 <div class="top">
  33.                     <span>收货人信息</span>
  34.                     <a href="">新增收货地址</a>
  35.                 </div>
  36.                 <div class="ads">
  37.                     <span>郑州居住地</span>
  38.                     <span>李*** 河南 郑州市 金水区 大石桥街道 文化路****东户 180****0120  <i>默认地址</i></span>
  39.                 </div>
  41.             </div>
  42.             <div class="paying">
  43.                 <span>支付方式</span>
  44.                 <div>
  45.                     <span>货到付款</span>
  46.                     <span><i>惠</i>在线支付</span>
  47.                 </div>
  48.             </div>
  49.             <div class="shop-list">
  50.     <!--<img src="../../static/images/shop-list.png" alt="">-->
  51.                 <span>送货清单</span>
  52.                 <div class="shop-list-top-right">
  53.                     <a href="">价格说明</a>
  54.                     <a href="">返回修改购物车</a>
  55.                 </div>
  56.                 <div class="shop-send1 bgc1">
  57.                     <div>
  58.                         <span>配送方式</span>
  59.                         <a href="">对应商品</a>
  60.                     </div>
  61.                     <span>京东快递</span>
  62.                     <span><i>配送时间:</i>工作日、双休日、节假日均可送货</span>
  63.                 </div>
  64.                 <div class="shop-list-detail bgc2">
  65.                     <p>商家：京东自营</p>
  66.                     <div class="detail">
  67.                         <img src="../../static/images/shop1.jpg" alt="">
  68.                         <div>
  69.                             <span> <i>京东超市</i>贵州茅台镇举酌酱香型白酒整箱53度500ml*6瓶私人收藏坤沙纯粮食高粱原浆</span>
  70.                             <span><i>颜色</i>茅台镇藏酒</span>
  71.                             <span>不支持7天无理由退货</span>
  72.                         </div>
  73.                         <span>¥268.00</span>
  74.                         <span>×1</span>
  75.                         <span>无货</span>
  76.                     </div>
  77.                 </div>
  78.                 <div class="shop-sends bgc1">
  79.                     <span><i>总重量：</i>0.140kg</span>
  80.                 </div>
  81.                 <div class="shop-list-detail bgc2">
  82.                     <p>商家：京东自营</p>
  83.                     <div class="detail">
  84.                         <img src="../../static/images/shop1.jpg" alt="">
  85.                         <div>
  86.                             <span> <i>京东超市</i>贵州茅台镇举酌酱香型白酒整箱53度500ml*6瓶私人收藏坤沙纯粮食高粱原浆</span>
  87.                             <span><i>颜色</i>茅台镇藏酒</span>
  88.                             <span>不支持7天无理由退货</span>
  89.                         </div>
  90.                         <span>¥268.00</span>
  91.                         <span>×1</span>
  92.                         <span>无货</span>
  93.                     </div>
  94.                 </div>
  95.                 <div class="shop-send1 bgc1">
  96.                     <div>
  97.                         <span>配送方式</span>
  98.                         <a href="">对应商品</a>
  99.                     </div>
  100.                     <span>京东快递</span>
  101.                     <span><i>配送时间:</i>工作日、双休日、节假日均可送货</span>
  102.                 </div>
  103.                 <div class="shop-list-detail bgc2">
  104.                     <p>商家：京东自营</p>
  105.                     <div class="detail">
  106.                         <img src="../../static/images/shop1.jpg" alt="">
  107.                         <div>
  108.                             <span> <i>京东超市</i>贵州茅台镇举酌酱香型白酒整箱53度500ml*6瓶私人收藏坤沙纯粮食高粱原浆</span>
  109.                             <span><i>颜色</i>茅台镇藏酒</span>
  110.                             <span>不支持7天无理由退货</span>
  111.                         </div>
  112.                         <span>¥268.00</span>
  113.                         <span>×1</span>
  114.                         <span>无货</span>
  115.                     </div>
  116.                 </div>
  117.         </div>
  118.         </div>
  119.         <div class="pay-foot">
  120.             <div class="pay-info">
  121.                 <div>
  122.                     <span>3 件商品，总商品金额：</span>
  123.                     <span>¥2780.90</span>
  124.                 </div>
  125.                 <div>
  126.                     <span>运费：</span>
  127.                     <span>¥0.00</span>
  128.                 </div>
  129.             </div>
  130.             <div class="address-info">
  131.                 <div>
  132.                     <span>应付总额：</span>
  133.                     <span>¥2780.90</span>
  134.                 </div>
  135.                 <div>
  136.                     <span>寄送至： 河南 郑州市 金水区 大石桥街道 文化路1**号院*号楼*单元*层东户</span>
  137.                     <span>收货人：李** 180****0120</span>
  138.                 </div>
  139.             </div>
  140.             <button>提交订单</button>
  142.         </div>
  143.     </div>
  144.     <div class="public-footer">
  145.         <div class="nav">
  146.             <a href=""><span>链接1</span></a>
  147.             <a href=""><span>链接2</span></a>
  148.             <a href=""><span>链接3</span></a>
  149.             <a href=""><span>链接4</span></a>
  150.             <a href=""><span>链接5</span></a>
  151.             <a href=""><span>链接6</span></a>
  152.             <a href=""><span>链接7</span></a>
  153.         </div>
  154.         <div class="logo">
  155.             <a href=""><img src="../../static/images/logo.png" alt=""></a>
  156.         </div>
  157.         <div class="info">
  158.             <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  159.             <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  160.             <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  161.         </div>
  162.         <div>
  163.             <p>关注公众号</p>
  164.             <img src="../../static/images/erwei-code.png" alt="">
  165.         </div>
  166.     </div>
  168. </body>
  169. </html>

3、css代码：

  1. @import "../../components/public_reset.css";
  2. @import "../../components/public/public_header/public_header.css";
  3. @import url(../../components/public/public_footer/public_footer.css);
  4. /*结算页头*/
  5. .payment {
  6.     width: 1200px;
  7.     margin: 10px auto;
  8.     background-color: #fff;
  9. }
  10. .payment > .head {
  11.     height: 120px;
  12.     display: flex;
  13.     justify-content: space-between;
  14.     padding:0 10px;
  15.     box-sizing: border-box;
  16.     align-items: center;
  17. }
  18. .payment > .head > div {
  19.     display: flex;
  20. }
  21. .payment > .head > div > span  {
  22.     margin-left: 10px;
  23.     font-size: 20px;
  24.     align-self: center;
  25. }
  26. .payment > .head > div  img {
  27.     height: 85px;
  28. }
  29. .payment > .head > :last-child {
  30.     width: 500px;
  31.     height: 120px;
  32.     align-self: self-start;
  33. }
  35. .payment > h3 {
  36.     margin-left: 10px;
  37.     padding-left: 10px;
  38.     color:#969896;
  39. }
  40. /*收获地址*/
  42. .payment > .pay > .address {
  43.     border-bottom: 1px solid #b0b0b0;
  44.     margin:5px 20px ;
  45. }
  46. .payment > .pay > .address > .top {
  47.     font-size: 14px;
  48.     color:#222222;
  49.     margin: 10px 0;
  50.     display: flex;
  51. }
  52. .payment > .pay > .address > .top > :first-child {
  53.     font-weight: bold;
  54.     margin-left: 15px;
  55. }
  56. .payment > .pay > .address > .top > :last-child {
  57.     font-size: 12px;
  58.     margin-left: auto;
  59.     color: #178CEE;
  60. }
  61. .payment > .pay > .address > .top > :last-child:hover {
  62.     color:#ff0000;
  63. }
  65. .payment > .pay > .address > .ads {
  66.     height: 50px;
  67.     margin-left: 30px;
  68.     display: flex;
  69.     align-items: center;
  70.     box-sizing: border-box;
  71.     padding-bottom: 10px;
  72. }
  74. .payment > .pay > .address > .ads > :first-child {
  75.     width: 100px;
  76.     height: 25px;
  77.     border: 2px solid #ff0000;
  78.     text-align: center;
  79.     line-height: 25px;
  81. }
  82. .payment > .pay > .address > .ads > :last-child {
  83.     margin-left: 15px;
  84.     display: flex;
  85. }
  87. .payment > .pay > .address > .ads > :last-child > i {
  88.     margin-left: 10px;
  89.     font-style: normal;
  90.     background-color: #666666;
  91.     color:#ffffff;
  92.     height: 20px;
  93.     width: 60px;
  94.     text-align: center;
  95.     line-height: 20px;
  97. }
  98. /*支付方式*/
  99. .payment > .pay > .paying {
  100.     margin:5px 20px;
  101.     display: flex;
  102.     flex-direction: column;
  104. }
  105. .payment > .pay > .paying > span {
  106.     font-size: 14px;
  107.     color:#222222;
  108.     font-weight: bold;
  109.     margin-left: 15px;
  110. }
  112. .payment > .pay > .paying > div {
  113.     display: flex;
  114.     margin-left: 10px;
  115.     margin-bottom: 10px;
  116. }
  117. .payment > .pay > .paying > div > *{
  118.     height: 30px;
  119.     width: 100px;
  120.     background-color:#F3F3F3;
  121.     margin-top:15px;
  122.     margin-left: 20px;
  123.     text-align: center;
  124.     line-height: 30px;
  125.     border: 1px solid #969896;
  126.     cursor: pointer;
  127. }
  128. .payment > .pay > .paying > div > :first-of-type:hover {
  129.     box-shadow: 0 0 3px #b0b0b0 inset;
  130. }
  131. .payment > .pay > .paying > div > :last-child {
  132.     border: 2px solid #ff0000 ;
  133.     box-sizing: border-box;
  134.     line-height: 28px;
  135.     display: flex;
  136.     align-items: center;
  137. }
  138. .payment > .pay > .paying > div > :last-child > i {
  139.     background-color: #ff0000;
  140.     height: 20px;
  141.     width: 20px;
  142.     font-style: normal;
  143.     color:#ffffff;
  144.     margin:0 5px;
  145.     line-height: 20px;
  146.     text-align: center;
  147. }
  148. /*结算商品内容*/
  149. .payment > .pay > .shop-list {
  150.     display: grid;
  151.     grid-template-columns: 4fr 8fr;
  152.     grid-template-rows:40px 1fr 1fr 1fr;
  153.     justify-items:center;
  154.     align-items: center;
  155.     margin: 5px 20px;
  156. }
  157. .payment > .pay > .shop-list > span {
  158.     justify-self: start;
  159.     margin-left: 15px;
  160.     font-size: 14px;
  161.     color:#222222;
  162.     font-weight: bold;
  163. }
  164. .payment > .pay > .shop-list > .shop-list-top-right {
  165.     justify-self: end;
  166. }
  167. .payment > .pay > .shop-list > .shop-list-top-right > a {
  168.     color: #178CEE;
  169.     font-size: 12px;
  170. }
  171. .payment > .pay > .shop-list > .shop-list-top-right > a:hover {
  172.     color:#ff0000;
  173. }
  174. .payment > .pay > .shop-list > .shop-list-top-right > :last-child {
  175.     margin-left: 20px;
  176. }
  177. .payment > .pay > .shop-list >.bgc1 {
  178.     background-color: #F7F7F7;
  179.     width: 380px;
  180.     padding: 15px;
  181.     box-sizing: border-box;
  182. }
  183. .payment > .pay > .shop-list >.bgc2 {
  184.     background-color: #F3FBFE;
  185.     width: 780px;
  186.     padding: 15px;
  187.     box-sizing: border-box;
  188. }
  189. .payment > .pay > .shop-list > .shop-send1 {
  190.     display: flex;
  191.     flex-direction: column;
  192.     justify-content: space-evenly;
  193. }
  194. .payment > .pay > .shop-list > .shop-send1 > * {
  195.     margin: 10px 0;
  196. }
  197. .payment > .pay > .shop-list > .shop-send1 > :first-child {
  199.     display: flex;
  200.     justify-content: space-between;
  201. }
  202. .payment > .pay > .shop-list > .shop-send1 > :first-child > span {
  203.     font-size: 12px;
  204.     color:#666666;
  205.     font-weight: bold;
  206. }
  207. .payment > .pay > .shop-list > .shop-send1 > :first-child > a {
  208.     color:#178CEE;
  209. }
  210. .payment > .pay > .shop-list > .shop-send1 > span:nth-child(2) {
  211.     border: 2px solid #ff0000;
  212.     width: 100px;
  213.     height: 22px;
  214.     text-align: center;
  215.     line-height: 20px;
  216.     margin-left: 20px;
  217. }
  218. .payment > .pay > .shop-list > .shop-send1 > :last-child > i {
  219.     font-style: normal;
  220.     font-size: 12px;
  221.     color: #b0b0b0;
  222. }
  224. .payment > .pay > .shop-list > .shop-list-detail > .detail {
  225.     display: grid;
  226.     grid-template-columns: 1fr 3.6fr 1.5fr 0.7fr 0.5fr;
  227. }
  228. .payment > .pay > .shop-list > .shop-list-detail > .detail > * {
  229.     margin:12px 0;
  230. }
  231. .payment > .pay > .shop-list > .shop-list-detail > .detail > div:first-of-type {
  232.     width: 300px;
  233.     height: 80px;
  234.     display: flex;
  235.     flex-direction: column;
  236.     justify-content: space-between;
  237. }
  238. .payment > .pay > .shop-list > .shop-sends {
  239.     display: flex;
  240.     height: 160px;
  241.     align-items:flex-end;
  242. }
  244.     /*提交订单*/
  245. .payment > .pay-foot {
  246.     display: flex;
  247.     flex-direction: column;
  248.     align-items: flex-end;
  249.     padding: 10px 0;
  250. }
  251. .payment > .pay-foot > .pay-info   {
  252.     display: flex;
  253.     flex-direction: column;
  254.     justify-content: center;
  255.     align-items: flex-end;
  256.     margin-right: 15px;
  257.     padding: 10px 0;
  259. }
  260. .payment > .pay-foot > .address-info {
  261.     width: 1200px;
  262.     height: 60px;
  263.     background-color: #F4F4F4;
  264.     display: flex;
  265.     flex-flow: column nowrap;
  266.     justify-content: center;
  267.     align-items: flex-end;
  268.     padding: 10px 0;
  270. }
  271. .payment > .pay-foot > .pay-info > div {
  272.     display: flex;
  273.     flex-direction: row;
  274.     justify-content: flex-end;
  275.     margin: 4px 0;
  277. }
  278. .payment > .pay-foot > .pay-info > div > :last-child {
  279.     width: 100px;
  280.     text-align: end;
  281. }
  282. .payment > .pay-foot > .address-info > *{
  283.     margin-right: 15px;
  284. }
  285. .payment > .pay-foot > .address-info > div {
  286.     display: flex;
  287.     flex-direction: row;
  288.     justify-content: flex-end;
  289.     margin-top: 4px;
  290.     margin-bottom: 4px;
  292. }
  293. .payment > .pay-foot > .address-info > div:first-of-type > :last-child {
  294.     width: 100px;
  295.     text-align: end;
  296.     color:#ff0000;
  297.     font-weight: bold;
  298.     font-size: 18px;
  299. }
  301. .payment > .pay-foot > .address-info > div:last-of-type > :last-child{
  302.     margin-left: 25px;
  303. }
  304. .payment > .pay-foot > button {
  305.     border: none;
  306.     background-color: #ff0000;
  307.     width: 120px;
  308.     height: 40px;
  309.     font-size: 18px;
  310.     font-weight: bold;
  311.     color:#ffffff;
  312.     border-radius: 3px;
  313.     margin-right: 15px;
  314.     margin-top:10px;
  315.     cursor: pointer;
  317. }
  318. .payment > .pay-foot > button:hover{
  319.     background-color: #ED4548;
  321. }

4、效果图：


作业总结：
1、css代码利用率低，写道那一块，写那块的css代码，一些通用的css属性没有很好的规划。
2、grid不熟练，html大部页面通过块可以直接拼接，而用grid布局来调节细节有点大材小用，主要没有大局观，总是从细节写起，所以grid用的少
3、发现各种浏览器之间兼容不太好，谷歌和火狐的显示有些差异。

上一条：laravel数据库访问--php培训九期线上班下一条：2019.12.26第六节课 组件css
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多