search

博客列表 >基于flex布局的购物车页面（元旦前端学习作业）

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

小辰
小辰原创
2020年01月07日 12:31:36899浏览

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">
  36.             </label>
  37.             </span>
  38.             <span><i>¥</i>500.00</span>
  39.             <span><a href="">删除</a></span>
  40.         </div>
  41.         <div>
  42.             <span><input type="checkbox" name="chooose" checked></span>
  43.             <!-- 图文介绍 -->
  44.             <span class="pic-intro">
  45.                 <a href=""><img src="img/shop5.jpg"></a>
  46.                 <a href="">商品简介商品简介商品简介。。</a>
  47.             </span>
  48.             <span>500.00</span>
  49.             <span>
  50.             <label><input type="number" name="count" value="1" min="1">
  52.             </label>
  53.             </span>
  54.             <span><i>¥</i>500.00</span>
  55.             <span><a href="">删除</a></span>
  56.         </div>
  57.         <div>
  58.             <span><input type="checkbox" name="chooose" checked></span>
  59.             <!-- 图文介绍 -->
  60.             <span class="pic-intro">
  61.                 <a href=""><img src="img/shop5.jpg"></a>
  62.                 <a href="">商品简介商品简介商品简介。。</a>
  63.             </span>
  64.             <span>500.00</span>
  65.             <span>
  66.             <label><input type="number" name="count" value="1" min="1">
  68.             </label>
  69.             </span>
  70.             <span><i>¥</i>500.00</span>
  71.             <span><a href="">删除</a></span>
  72.         </div>
  73.     </main>
  75.     <!-- 底部 -->
  76.     <footer>
  77.         <span>数量:<i>3</i></span>
  79.         <span>金额:<i>1500</i></span>
  80.         <button>去结算</button>
  82.     </footer>
  83. </div>
  84. </body>
  86. </html>

3.css代码

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

4.小结

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

上一条：关于如何在微信或者qq里打开链接下载app的解决方案，小火柴带你了解微下载的实现方法下一条：元旦作业+购物车结算页面的编写+10期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多