登录  /  注册
博主信息
博文 30
粉丝 0
评论 1
访问量 23089
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12.31日作业练习,HTML+CSS知识运用
原创
562人浏览过

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>
  139. <div>
  140. <a href="">已选择3件商品</a>
  141. </div>
  142. <div>
  143. <div>
  144. <span>总价:</span><i>&yen;577.00</i>
  145. </div>
  146. <span>促销:-&yen;0.00</span>
  147. </div>
  148. <div>
  149. <button>去结算</button>
  150. </div>
  151. </div>
  152. </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;
  43. }
  44. .shop-public-shopcart>.buy-shop>div:first-of-type{
  45. grid-column: 1 / 9;
  46. grid-row: 1 / 2;
  47. align-self: center;
  48. box-sizing: border-box;
  49. margin-left: 8px;
  50. }
  51. .shop-public-shopcart>.buy-shop>div:first-of-type>a{
  52. margin-left: 5px;
  53. }
  54. .shop-public-shopcart>.buy-shop>.shop-1{
  55. padding-top: 10px;
  56. padding-left: 8px;
  57. font-size: small;
  58. box-sizing: border-box;
  59. background-color: #FFF4E8;
  60. }
  61. .shop-public-shopcart>.buy-shop>.shop-1 a {
  62. font-size: 12px;
  63. }
  64. .shop-public-shopcart>.buy-shop>div:nth-of-type(7)>input{
  65. width: 90px;
  66. border: 1px solid #CACBCB;
  67. outline: none;
  68. }
  69. .shop-public-shopcart>.buy-shop>div:nth-of-type(7)>span{
  70. color: #CACBCB;
  71. margin-left: 30px;
  72. }
  73. .shop-public-shopcart>.buy-shop>div:nth-of-type(8){
  74. padding-left: 15px;
  75. box-sizing: border-box;
  76. }
  77. .shop-public-shopcart>.buy-shop>div:nth-of-type(5)>p{
  78. color: #CACBCB;
  79. font-size: small;
  80. }
  81. .shop-public-shopcart>.buy-shop>div:nth-of-type(4)>p>a{
  82. color: #CACBCB;
  83. }
  84. .shop-public-shopcart>.buy-shop>div:last-of-type>a{
  85. color: #CACBCB;
  86. padding-left: 10px;
  87. box-sizing: border-box;
  88. }
  89. .shop-public-shopcart>.ettlement{
  90. height: 50px;
  91. display: flex;
  92. align-items: center;
  93. border: 1px solid #CACBCB;
  94. margin-top: 20px;
  95. box-sizing: border-box;
  96. }
  97. .shop-public-shopcart>.ettlement span{
  98. font-size: 12px;
  99. color: #666666;
  100. }
  101. .shop-public-shopcart>.ettlement a{
  102. font-size: 12px;
  103. color: #666666;
  104. }
  105. .shop-public-shopcart>.ettlement>div:first-of-type{
  106. width: 400px;
  107. }
  108. .shop-public-shopcart>.ettlement>div:first-of-type>*{
  109. margin: 0 5px;
  110. }
  111. .shop-public-shopcart>.ettlement>div:nth-of-type(2){
  112. height: 30px;
  113. margin-left: auto;
  114. margin-right: 10px;
  115. }
  116. /*转为弹性盒子*/
  117. .shop-public-shopcart>.ettlement>div:nth-of-type(3){
  118. width: 120px;
  119. height: 40px;
  120. display: flex;
  121. flex-direction: column;
  122. align-items: end;
  123. margin-right: 10px;
  124. box-sizing: border-box;
  125. }
  126. .shop-public-shopcart>.ettlement>div:nth-of-type(3) i{
  127. color: red;
  128. font-size: 20px;
  129. /*去掉i标签默认样式*/
  130. font-style: normal;
  131. }
  132. .shop-public-shopcart>.ettlement>div:last-of-type{
  133. width: 90px;
  134. height: 50px;
  135. }
  136. .shop-public-shopcart>.ettlement>div:last-of-type>button{
  137. width: 90px;
  138. height: 50px;
  139. border: none;
  140. background-color: #E64347;
  141. color: white;
  142. font-size: 20px;
  143. }

效果图

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

  1. <div class="public-settlement-page">
  2. <div>
  3. <img src="../../static/images/logo.png" alt="">
  4. <span>结算页</span>
  5. </div>
  6. <div>
  7. <span>填写并核对订单信息</span>
  8. </div>
  9. <div class="pay-page">
  10. <div>
  11. <span>收货人信息</span>
  12. <a href="">新增收货地址</a>
  13. </div>
  14. <div>
  15. <span>张先生</span>
  16. <span>
  17. 张三 重庆 九龙坡区 XXXXXXXXXXXXXXXXXXXXXXX 电话:181****1234
  18. </span>
  19. <a href="">默认地址</a>
  20. </div>
  21. <div>
  22. <span>支付方式</span>
  23. </div>
  24. <div>
  25. <div>
  26. <input type="radio" name="cash" id="cash">
  27. <label for="cash">货到付款</label>
  28. </div>
  29. <div>
  30. <input type="radio" name="cash" id="online">
  31. <label for="online">货到付款</label>
  32. </div>
  33. </div>
  34. </div>
  35. <div>
  36. <span>应付总额:</span><i>&yen;577.00</i>
  37. </div>
  38. <div>
  39. <button>提交订单</button>
  40. </div>
  41. </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. }
  10. .public-settlement-page>div:first-of-type{
  11. display: flex;
  12. align-items: center;
  13. }
  14. .public-settlement-page>div:first-of-type>span{
  15. font-size: 20px;
  16. color: #636363;
  17. margin-left: 10px;
  18. }
  19. .public-settlement-page>div:nth-of-type(2)>span{
  20. font-size: 16px;
  21. color: #666666;
  22. margin: 10px 0;
  23. box-sizing: border-box;
  24. }
  25. /*嵌套网格布局*/
  26. .public-settlement-page>.pay-page{
  27. margin: 10px 0;
  28. /*padding: 0 10px;*/
  29. box-sizing: border-box;
  30. display: grid;
  31. grid-template-columns: 980px;
  32. grid-template-rows: 40px 50px 40px 50px;
  33. justify-content: center;
  34. }
  35. .public-settlement-page>.pay-page>div:first-of-type{
  36. display: flex;
  37. justify-content: space-between;
  38. align-items: center;
  39. box-sizing: border-box;
  40. }
  41. .public-settlement-page>.pay-page>div:first-of-type>a{
  42. color: #44AAEE;
  43. }
  44. .public-settlement-page>.pay-page>div:nth-of-type(2){
  45. /*align-self: center;*/
  46. padding-left: 20px;
  47. box-sizing: border-box;
  48. border-bottom: 1px solid #cccccc;
  49. }
  50. .public-settlement-page>.pay-page>div:nth-of-type(2)>a{
  51. background-color: #999999;
  52. color: white;
  53. margin-left: 10px;
  54. }
  55. .public-settlement-page>.pay-page>div:nth-of-type(3){
  56. align-self: center;
  57. }
  58. .public-settlement-page>.pay-page>div:last-of-type{
  59. display: flex;
  60. padding-left: 20px;
  61. border-bottom: 1px solid #cccccc;
  62. box-sizing: border-box;
  63. }
  64. .public-settlement-page>.pay-page>div:last-of-type>div{
  65. margin: 0 10px;
  66. }
  67. .public-settlement-page>div:nth-of-type(4){
  68. margin-left: auto;
  69. padding-right: 20px;
  70. box-sizing: border-box;
  71. }
  72. .public-settlement-page>div:nth-of-type(4)>i{
  73. font-style: normal;
  74. font-size: 20px;
  75. color: red;
  76. }
  77. .public-settlement-page>div:last-of-type{
  78. margin-left: auto;
  79. padding-right: 30px;
  80. box-sizing: border-box;
  81. }
  82. .public-settlement-page>div:last-of-type>button{
  83. width: 100px;
  84. height: 30px;
  85. margin-top: 5px;
  86. box-sizing: border-box;
  87. border: none;
  88. border-radius: 5px;
  89. background-color: #E33D3F;
  90. color: white;
  91. }

效果图

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

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:选择的依据, 单行单列就用flex, 多行多列就用grid, 没啥好纠结的
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学