博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4346
积分:0
P豆:52

基于flex布局的购物车页面(元旦前端学习作业)

2020年01月07日 12:31:36阅读数:208博客 / 小辰/ 前端学习

1.先上效果图

主要是flex布局和传统定位对页面的布局

2.html页面代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>商城系统购物车</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="css/shop-cart.css">
  7. </head>
  8. <body>
  9. <!-- 商城购物车 -->
  10. <div class="shopcart">
  11. <h3>我的购物车</h3>
  12. <header>
  13. <span>
  14. <input type="checkbox" id="all-selected" checked="choose" >
  15. <label for="all-selected">全选</label>
  16. </span>
  17. <span>商品</span>
  18. <span>单价</span>
  19. <span>数量</span>
  20. <span>小计</span>
  21. <span>操作</span>
  22. </header>
  23. <!-- 购物车主体 -->
  24. <main>
  25. <div>
  26. <span><input type="checkbox" name="chooose" checked></span>
  27. <!-- 图文介绍 -->
  28. <span class="pic-intro">
  29. <a href=""><img src="img/shop5.jpg"></a>
  30. <a href="">商品简介商品简介商品简介。。</a>
  31. </span>
  32. <span>500.00</span>
  33. <span>
  34. <label><input type="number" name="count" value="1" min="1">
  35. </label>
  36. </span>
  37. <span><i>¥</i>500.00</span>
  38. <span><a href="">删除</a></span>
  39. </div>
  40. <div>
  41. <span><input type="checkbox" name="chooose" checked></span>
  42. <!-- 图文介绍 -->
  43. <span class="pic-intro">
  44. <a href=""><img src="img/shop5.jpg"></a>
  45. <a href="">商品简介商品简介商品简介。。</a>
  46. </span>
  47. <span>500.00</span>
  48. <span>
  49. <label><input type="number" name="count" value="1" min="1">
  50. </label>
  51. </span>
  52. <span><i>¥</i>500.00</span>
  53. <span><a href="">删除</a></span>
  54. </div>
  55. <div>
  56. <span><input type="checkbox" name="chooose" checked></span>
  57. <!-- 图文介绍 -->
  58. <span class="pic-intro">
  59. <a href=""><img src="img/shop5.jpg"></a>
  60. <a href="">商品简介商品简介商品简介。。</a>
  61. </span>
  62. <span>500.00</span>
  63. <span>
  64. <label><input type="number" name="count" value="1" min="1">
  65. </label>
  66. </span>
  67. <span><i>¥</i>500.00</span>
  68. <span><a href="">删除</a></span>
  69. </div>
  70. </main>
  71. <!-- 底部 -->
  72. <footer>
  73. <span>数量:<i>3</i></span>
  74. <span>金额:<i>1500</i></span>
  75. <button>去结算</button>
  76. </footer>
  77. </div>
  78. </body>
  79. </html>

3.css代码

  1. @import url(reset.css);
  2. .shopcart {
  3. width: 1200px;
  4. background-color: #fff;
  5. margin: 30px auto;
  6. padding: 15px 0;
  7. border-radius: 8px;
  8. box-sizing: border-box;
  9. }
  10. .shopcart:hover {
  11. box-shadow: 0 0 8px #888888;
  12. }
  13. /*标题*/
  14. .shopcart > h3 {
  15. font-size: 20px;
  16. text-align: center;
  17. font-weight: normal;
  18. margin-bottom: 20px;
  19. }
  20. /*购物车头部*/
  21. .shopcart > header {
  22. height: 40px;
  23. border-bottom: 1px solid #cccccc;
  24. /*flex*/
  25. display: flex;
  26. justify-content: space-around;
  27. align-items: center;
  28. }
  29. /*购物车主体*/
  30. .shocart > main {
  31. margin: 20px 0;
  32. }
  33. /*购物车中的每一条记录, 每一个商品*/
  34. .shopcart > main > div {
  35. height: 80px;
  36. /*flex*/
  37. display: flex;
  38. justify-content: space-around;
  39. align-items: center;
  40. }
  41. .shopcart > main > div:hover {
  42. background-color: lightcyan;
  43. }
  44. .shopcart > main > div .pic-intro {
  45. width: 250px;
  46. display: flex;
  47. margin-left: 50px;
  48. align-items: center;
  49. }
  50. .shopcart > main > div .pic-intro img {
  51. width: 60px;
  52. height: 45px;
  53. margin-right: 10px;
  54. }
  55. .shopcart > main > div a:hover {
  56. color: lightcoral;
  57. }
  58. /*微调第一个复选框*/
  59. .shopcart > main > div > span:first-of-type {
  60. position: relative;
  61. left: 25px;
  62. }
  63. .shopcart > main > div > span.pic-intro {
  64. position: relative;
  65. left: -40px;
  66. }
  67. .shopcart > main > div > span:nth-of-type(3) {
  68. position: relative;
  69. left: -110px;
  70. }
  71. .shopcart > main > div > span:nth-of-type(4) {
  72. position: relative;
  73. left: -80px;
  74. }
  75. .shopcart > main > div > span:nth-of-type(4) input {
  76. width: 60px;
  77. }
  78. .shopcart > main > div > span:nth-last-of-type(2) {
  79. position: relative;
  80. left: -70px;
  81. }
  82. .shopcart > main > div > span:last-of-type {
  83. position: relative;
  84. left: -30px;
  85. }
  86. .shopcart > main > div > span:nth-last-of-type(2) i {
  87. color: green;
  88. font-size: 1.01rem;
  89. margin-right: 3px;
  90. }
  91. /*购物车底部*/
  92. .shopcart > footer {
  93. height: 70px;
  94. padding: 20px;
  95. border-top: 1px solid #cccccc;
  96. box-sizing: border-box;
  97. display: flex;
  98. justify-content: flex-end;
  99. align-items: center;
  100. }
  101. .shopcart > footer > *:not(:last-child) {
  102. width: 180px;
  103. }
  104. .shopcart > footer > button {
  105. height: 40px;
  106. width: 120px;
  107. background-color: lightcoral;
  108. border: none;
  109. color: white;
  110. font-size: 1.1rem;
  111. }
  112. .shopcart > footer > button:hover {
  113. background-color: seagreen;
  114. cursor: pointer;
  115. }

4.小结

.一开始,我觉得直接用grid布局就可以了,后来发现用grid布局就是用错了,因为用户还要有可能还会增加或者减少商品,用grid布局是会产生局限性,我觉得grid布局适用于那些结构比较固定的页面,那些会随这用户操作变化的页面主要用flex布局比较好。

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:你可以有自己创意

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论