search

博客列表 >12.31日作业练习，HTML+CSS知识运用

12.31日作业练习，HTML+CSS知识运用

曾
曾原创
2020年01月01日 16:58:04585浏览

2020年第一天。
今天把开学到现在一周课程学习的HTML+CSS综合运用，仿写了一个商城购物车和结算页面（结算页面简写）
购物车HTML代码

  1. <div class="shop-public-shopcart">
  2.     <div class="title1">
  3.         <a href="">全部商品</a>
  4.     </div>
  5.     <div class="title2">
  6.         <input type="checkbox" name="shopping" id="buy" checked="checked">
  7.         <label for="buy">全选</label>
  8.         <span>商品</span>
  9.         <span>单价</span>
  10.         <span>数量</span>
  11.         <span>小计</span>
  12.         <span>操作</span>
  13.     </div>
  14.     <div class="buy-shop">
  15.         <div>
  16.             <label for="store"></label>
  17.              <input type="checkbox" name="shopping" id="store">
  18.             <a href="">森马运动户外旗舰店</a>
  19.         </div>
  20.             <div class="shop-1">
  21.             <label for="buy-1"></label>
  22.             <input type="checkbox" name="shopping" id="buy-1">
  23.         </div>
  24.         <div class="shop-1">
  25.             <a href=""><img src="../../static/images/shop/1.jpg" alt=""></a>
  26.         </div>
  27.         <div class="shop-1 shop-4">
  28.             <a href="">森马运动鞋男网面跑步鞋潮流飞织鞋子休闲鞋网鞋透气运动鞋跑步鞋男 黑色</a>
  29.             <p>
  30.                  <i class="iconfont icon-shebeizhuangtai"></i>
  31.                  <a href="">选服务</a>
  32.             </p>
  33.         </div>
  34.         <div class="shop-1">
  35.             <p>黑色</p>
  36.             <p>42</p>
  37.         </div>
  38.         <div class="shop-1">
  39.             <span>&yen;179.00</span>
  40.         </div>
  41.         <div class="shop-1">
  42.             <label for="number"></label>
  43.             <input type="number" min="0" max="100" name="number" id="number">
  44.             <span>有货</span>
  45.         </div>
  46.         <div class="shop-1">
  47.             <span>&yen;179.00</span>
  48.         </div>
  49.         <div class="shop-1">
  50.             <a href="">删除</a>
  51.         </div>
  52.     </div>
  53.     <div class="buy-shop">
  54.         <div>
  55.             <label for="store"></label>
  56.             <input type="checkbox" name="shopping" id="store">
  57.             <a href="">森马运动户外旗舰店</a>
  58.         </div>
  59.         <div class="shop-1">
  60.             <label for="buy-1"></label>
  61.             <input type="checkbox" name="shopping" id="buy-1">
  62.         </div>
  63.         <div class="shop-1">
  64.             <a href=""><img src="../../static/images/shop/1.jpg" alt=""></a>
  65.         </div>
  66.         <div class="shop-1 shop-4">
  67.             <a href="">森马运动鞋男网面跑步鞋潮流飞织鞋子休闲鞋网鞋透气运动鞋跑步鞋男 黑色</a>
  68.             <p>
  69.                 <i class="iconfont icon-shebeizhuangtai"></i>
  70.                 <a href="">选服务</a>
  71.             </p>
  72.         </div>
  73.         <div class="shop-1">
  74.             <p>黑色</p>
  75.             <p>42</p>
  76.         </div>
  77.         <div class="shop-1">
  78.             <span>&yen;179.00</span>
  79.         </div>
  80.         <div class="shop-1">
  81.             <label for="number"></label>
  82.             <input type="number" min="0" max="100" name="number" id="number">
  83.             <span>有货</span>
  84.         </div>
  85.         <div class="shop-1">
  86.             <span>&yen;179.00</span>
  87.         </div>
  88.         <div class="shop-1">
  89.             <a href="">删除</a>
  90.         </div>
  91.     </div>
  92.     <div class="buy-shop">
  93.         <div>
  94.             <label for="store"></label>
  95.             <input type="checkbox" name="shopping" id="store">
  96.             <a href="">森马运动户外旗舰店</a>
  97.         </div>
  98.         <div class="shop-1">
  99.             <label for="buy-1"></label>
  100.             <input type="checkbox" name="shopping" id="buy-1">
  101.         </div>
  102.         <div class="shop-1">
  103.             <a href=""><img src="../../static/images/shop/1.jpg" alt=""></a>
  104.         </div>
  105.         <div class="shop-1 shop-4">
  106.             <a href="">森马运动鞋男网面跑步鞋潮流飞织鞋子休闲鞋网鞋透气运动鞋跑步鞋男 黑色</a>
  107.             <p>
  108.                 <i class="iconfont icon-shebeizhuangtai"></i>
  109.                 <a href="">选服务</a>
  110.             </p>
  111.         </div>
  112.         <div class="shop-1">
  113.             <p>黑色</p>
  114.             <p>42</p>
  115.         </div>
  116.         <div class="shop-1">
  117.             <span>&yen;179.00</span>
  118.         </div>
  119.         <div class="shop-1">
  120.             <label for="number"></label>
  121.             <input type="number" min="0" max="100" name="number" id="number">
  122.             <span>有货</span>
  123.         </div>
  124.         <div class="shop-1">
  125.             <span>&yen;179.00</span>
  126.         </div>
  127.         <div class="shop-1">
  128.             <a href="">删除</a>
  129.         </div>
  130.     </div>
  131.     <div class="ettlement">
  132.         <div>
  133.             <input type="checkbox" name="shopping" id="buy">
  134.             <label for="buy">全选</label>
  135.             <a href="">删除选中商品</a>
  136.             <a href="">移到关注</a>
  137.             <a href="">清理购物车</a>
  138.         </div>
  140.         <div>
  141.             <a href="">已选择3件商品</a>
  142.         </div>
  144.         <div>
  145.             <div>
  146.                 <span>总价:</span><i>&yen;577.00</i>
  147.             </div>
  148.             <span>促销：-&yen;0.00</span>
  149.         </div>
  151.         <div>
  152.             <button>去结算</button>
  153.         </div>
  154.     </div>
  155. </div>

CSS代码,主要用的弹性盒子，然后嵌套网格

  1. /*把主体容器变为弹性盒子*/
  2. .shop-public-shopcart{
  3.     width: 1008px;
  4.     display: flex;
  5.     font-size: 10px;
  6.     background-color: #fff;
  7.     flex-direction: column;
  8.     padding: 30px 10px;
  9.     margin: 0 auto;
  10.     box-sizing: border-box;
  11. }
  12. .shop-public-shopcart>.title1{
  13.     height: 30px;
  14.     width: 65px;
  15.     line-height: 30px;
  16.     border-bottom: 1px solid red;
  17. }
  18. .shop-public-shopcart>.title1>a{
  19.     font-size: 16px;
  20.     color: red;
  21. }
  22. /*把容器变为网格*/
  23. .shop-public-shopcart>.title2{
  24.     width: 988px;
  25.     display: grid;
  26.     grid-template-columns: 30px 100px 400px 150px 100px 104px 104px;
  27.     grid-template-rows: 45px;
  28.     align-items: center;
  29.     background-color: #e0e0e0;
  30. }
  31. .shop-public-shopcart>.title2>span:nth-of-type(n+2){
  32.     padding-left: 20px;
  33.     box-sizing: border-box;
  34. }
  35. /*把容器变为网格，为了好对齐下面的项目*/
  36. .shop-public-shopcart>.buy-shop{
  37.     width: 988px;
  38.     margin-top: 5px;
  39.     box-sizing: border-box;
  40.     display: grid;
  41.     grid-template-columns: 30px 100px 300px 100px 150px 100px 104px 104px;
  42.     grid-template-rows: 30px 120px;
  45. }
  46. .shop-public-shopcart>.buy-shop>div:first-of-type{
  47.     grid-column: 1 / 9;
  48.     grid-row: 1 / 2;
  49.     align-self: center;
  50.     box-sizing: border-box;
  51.     margin-left: 8px;
  52. }
  53. .shop-public-shopcart>.buy-shop>div:first-of-type>a{
  54.     margin-left: 5px;
  55. }
  56. .shop-public-shopcart>.buy-shop>.shop-1{
  57.     padding-top: 10px;
  58.     padding-left: 8px;
  59.     font-size: small;
  60.     box-sizing: border-box;
  61.     background-color: #FFF4E8;
  62. }
  63. .shop-public-shopcart>.buy-shop>.shop-1 a {
  64.     font-size: 12px;
  65. }
  66. .shop-public-shopcart>.buy-shop>div:nth-of-type(7)>input{
  67.     width: 90px;
  68.     border: 1px solid #CACBCB;
  69.     outline: none;
  70. }
  71. .shop-public-shopcart>.buy-shop>div:nth-of-type(7)>span{
  72.     color: #CACBCB;
  73.     margin-left: 30px;
  74. }
  75. .shop-public-shopcart>.buy-shop>div:nth-of-type(8){
  76.     padding-left: 15px;
  77.     box-sizing: border-box;
  78. }
  79. .shop-public-shopcart>.buy-shop>div:nth-of-type(5)>p{
  80.     color: #CACBCB;
  81.     font-size: small;
  82. }
  83. .shop-public-shopcart>.buy-shop>div:nth-of-type(4)>p>a{
  84.     color: #CACBCB;
  85. }
  86. .shop-public-shopcart>.buy-shop>div:last-of-type>a{
  87.     color: #CACBCB;
  88.     padding-left: 10px;
  89.     box-sizing: border-box;
  90. }
  91. .shop-public-shopcart>.ettlement{
  92.     height: 50px;
  93.     display: flex;
  94.     align-items: center;
  95.     border: 1px solid #CACBCB;
  96.     margin-top: 20px;
  97.     box-sizing: border-box;
  98. }
  99. .shop-public-shopcart>.ettlement span{
  100.     font-size: 12px;
  101.     color: #666666;
  102. }
  103. .shop-public-shopcart>.ettlement a{
  104.     font-size: 12px;
  105.     color: #666666;
  106. }
  107. .shop-public-shopcart>.ettlement>div:first-of-type{
  108.     width: 400px;
  109. }
  110. .shop-public-shopcart>.ettlement>div:first-of-type>*{
  111.     margin: 0 5px;
  112. }
  113. .shop-public-shopcart>.ettlement>div:nth-of-type(2){
  114.     height: 30px;
  115.     margin-left: auto;
  116.     margin-right: 10px;
  117. }
  118. /*转为弹性盒子*/
  119. .shop-public-shopcart>.ettlement>div:nth-of-type(3){
  120.     width: 120px;
  121.     height: 40px;
  122.     display: flex;
  123.     flex-direction: column;
  124.     align-items: end;
  125.     margin-right: 10px;
  126.     box-sizing: border-box;
  127. }
  128. .shop-public-shopcart>.ettlement>div:nth-of-type(3) i{
  129.     color: red;
  130.     font-size: 20px;
  131.     /*去掉i标签默认样式*/
  132.     font-style: normal;
  133. }
  134. .shop-public-shopcart>.ettlement>div:last-of-type{
  135.     width: 90px;
  136.     height: 50px;
  137. }
  138. .shop-public-shopcart>.ettlement>div:last-of-type>button{
  139.     width: 90px;
  140.     height: 50px;
  141.     border: none;
  142.     background-color: #E64347;
  143.     color: white;
  144.     font-size: 20px;
  146. }

效果图

以下是结算页面，目前只写了地址，还有付款方式，都没加JS效果，只是静态页面
HTML代码

  1. <div class="public-settlement-page">
  2.     <div>
  3.         <img src="../../static/images/logo.png" alt="">
  4.         <span>结算页</span>
  5.     </div>
  7.     <div>
  8.         <span>填写并核对订单信息</span>
  9.     </div>
  11.     <div class="pay-page">
  12.         <div>
  13.                 <span>收货人信息</span>
  14.                 <a href="">新增收货地址</a>
  15.         </div>
  17.         <div>
  18.             <span>张先生</span>
  19.             <span>
  20.                 张三 重庆 九龙坡区 XXXXXXXXXXXXXXXXXXXXXXX  电话：181****1234
  21.             </span>
  22.             <a href="">默认地址</a>
  23.         </div>
  25.         <div>
  26.             <span>支付方式</span>
  27.         </div>
  29.         <div>
  30.             <div>
  31.                 <input type="radio" name="cash" id="cash">
  32.                 <label for="cash">货到付款</label>
  33.             </div>
  35.             <div>
  36.                 <input type="radio" name="cash" id="online">
  37.                 <label for="online">货到付款</label>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     <div>
  42.         <span>应付总额：</span><i>&yen;577.00</i>
  43.     </div>
  44.     <div>
  45.         <button>提交订单</button>
  46.     </div>
  47. </div>

CSS代码，整体还是FLEX布局，里面嵌套了Grid网格布局

  1. .public-settlement-page{
  2.     width: 1000px;
  3.     display: flex;
  4.     flex-direction: column;
  5.     margin: 100px auto;
  6.     padding: 20px 0;
  7.     box-sizing: border-box;
  8.     background-color: #fff;
  9. }
  11. .public-settlement-page>div:first-of-type{
  12.     display: flex;
  13.     align-items: center;
  14. }
  16. .public-settlement-page>div:first-of-type>span{
  17.     font-size: 20px;
  18.     color: #636363;
  19.     margin-left: 10px;
  20. }
  22. .public-settlement-page>div:nth-of-type(2)>span{
  23.     font-size: 16px;
  24.     color: #666666;
  25.     margin: 10px 0;
  26.     box-sizing: border-box;
  27. }
  28. /*嵌套网格布局*/
  29. .public-settlement-page>.pay-page{
  30.     margin: 10px 0;
  31.     /*padding: 0 10px;*/
  32.     box-sizing: border-box;
  33.     display: grid;
  34.     grid-template-columns: 980px;
  35.     grid-template-rows: 40px 50px 40px 50px;
  36.     justify-content: center;
  37. }
  39. .public-settlement-page>.pay-page>div:first-of-type{
  40.     display: flex;
  41.     justify-content: space-between;
  42.     align-items: center;
  43.     box-sizing: border-box;
  44. }
  46. .public-settlement-page>.pay-page>div:first-of-type>a{
  47.     color: #44AAEE;
  48. }
  50. .public-settlement-page>.pay-page>div:nth-of-type(2){
  51.     /*align-self: center;*/
  52.     padding-left: 20px;
  53.     box-sizing: border-box;
  54.     border-bottom: 1px solid #cccccc;
  55. }
  57. .public-settlement-page>.pay-page>div:nth-of-type(2)>a{
  58.     background-color: #999999;
  59.     color: white;
  60.     margin-left: 10px;
  61. }
  63. .public-settlement-page>.pay-page>div:nth-of-type(3){
  64.     align-self: center;
  65. }
  67. .public-settlement-page>.pay-page>div:last-of-type{
  68.     display: flex;
  69.     padding-left: 20px;
  70.     border-bottom: 1px solid #cccccc;
  71.     box-sizing: border-box;
  72. }
  73. .public-settlement-page>.pay-page>div:last-of-type>div{
  74.     margin: 0 10px;
  76. }
  78. .public-settlement-page>div:nth-of-type(4){
  79.     margin-left: auto;
  80.     padding-right: 20px;
  81.     box-sizing: border-box;
  82. }
  84. .public-settlement-page>div:nth-of-type(4)>i{
  85.     font-style: normal;
  86.     font-size: 20px;
  87.     color: red;
  88. }
  90. .public-settlement-page>div:last-of-type{
  91.     margin-left: auto;
  92.     padding-right: 30px;
  93.     box-sizing: border-box;
  94. }
  96. .public-settlement-page>div:last-of-type>button{
  97.     width: 100px;
  98.     height: 30px;
  99.     margin-top: 5px;
  100.     box-sizing: border-box;
  101.     border: none;
  102.     border-radius: 5px;
  103.     background-color: #E33D3F;
  104.     color: white;
  105. }

效果图

经过写这两个页面，发现在静态布局上，大体思路有了，目前还局限在选择FLEX还是Grid上面，其实感觉不用纠结，觉得谁好用谁顺手，就用谁就行了，我觉得这个也是大部分新人一个纠结的地方。
就是对于多选框，点击最上面的全选就可以把所有商品都选择进去，因为JS还没学，不太会，就只做了个样式。
做了几个，感觉越来越有意思了，兴趣也浓厚了，很期待接下来的学习。
最后，祝各位2020新年快乐！！！

上一条：仿写m.php.cn首页下一条：第十期Grid重写二手商品交易组件页面（2019-12-28）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多