search

博客列表 >1月1日元旦作业

1月1日元旦作业

- 迷舍人
- 迷舍人原创
2020年01月02日 23:22:18542浏览

总结：其实原来12.31晚上就做出来了，但是主体和头部 都用的分散对齐 然后购物车里面和上面不对称 ，忘记用position: relative;进行定位微调了，我还以为这样微调了会影响什么就是一种担心，现在老师一讲就明白了 ，能达到自己想要的效果就行！

效果图-购物车

购物车 html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车</title>
  6.     <link rel="stylesheet" href="gouwuche.css">
  7. </head>
  8. <body>
  9.     <div class="shopping">
  10.         <h3>购物车</h3>
  11.         <header>
  12.             <span>
  13.                 <input type="checkbox" name="checked"  id="checked" checked>
  14.             <label for="checked">全选</label>
  15.             </span>
  16.             <span>商品</span>
  17.             <span>单价</span>
  18.             <span>数量</span>
  19.             <span>小计</span>
  20.             <span>操作</span>
  21.         </header>
  22.         <main>
  23.             <div class="main-top">
  24.                 <span>
  25.                 <input type="checkbox" checked>
  26.             </span>
  27.                 <div>
  28.                     <span>
  29.                         <a href="">
  30.                         <img src="static/images/shop/10.jpg" alt="">
  31.                     </a>
  32.                         <a href="">【送国检一对一证书佛级手串佛珠念珠木饰男款水</a>
  33.                     </span>
  34.                 </div>
  35.                 <span><i>&yen</i>888</span>
  36.                 <span>
  37.                 <input type="number" name="count" value="1" min="1">
  38.             </span>
  39.                 <span><i>&yen;</i>888</span>
  40.                 <span>
  41.                 <a href="">删除</a>
  42.             </span>
  43.             </div>
  44.             <div class="main-top">
  45.                 <span>
  46.                 <input type="checkbox" checked>
  47.             </span>
  48.                 <div>
  49.                     <span>
  50.                         <a href="">
  51.                         <img src="static/images/shop/10.jpg" alt="">
  52.                     </a>
  53.                         <a href="">【送国检一对一证书佛级手串佛珠念珠木饰男款水</a>
  54.                     </span>
  55.                 </div>
  56.                 <span><i>&yen</i>888</span>
  57.                 <span>
  58.                 <input type="number" name="count" value="1" min="1">
  59.             </span>
  60.                 <span><i>&yen;</i>888</span>
  61.                 <span>
  62.                 <a href="">删除</a>
  63.             </span>
  64.             </div>
  65.             <div class="main-top">
  66.                 <span>
  67.                 <input type="checkbox" checked>
  68.             </span>
  69.                 <div>
  70.                     <span>
  71.                         <a href="">
  72.                         <img src="static/images/shop/10.jpg" alt="">
  73.                     </a>
  74.                         <a href="">【送国检一对一证书佛级手串佛珠念珠木饰男款水</a>
  75.                     </span>
  76.                 </div>
  77.                 <span><i>&yen</i>888</span>
  78.                 <span>
  79.                 <input type="number" name="count" value="1" min="1">
  80.             </span>
  81.                 <span><i>&yen;</i>888</span>
  82.                 <span>
  83.                 <a href="">删除</a>
  84.             </span>
  85.             </div>
  86.             <div class="main-top">
  87.                 <span>
  88.                 <input type="checkbox" checked>
  89.             </span>
  90.                 <div>
  91.                     <span>
  92.                         <a href="">
  93.                         <img src="static/images/shop/10.jpg" alt="">
  94.                     </a>
  95.                         <a href="">【送国检一对一证书佛级手串佛珠念珠木饰男款水</a>
  96.                     </span>
  97.                 </div>
  98.                 <span><i>&yen</i>888</span>
  99.                 <span>
  100.                 <input type="number" name="count" value="1" min="1">
  101.             </span>
  102.                 <span><i>&yen;</i>888</span>
  103.                 <span>
  104.                 <a href="">删除</a>
  105.             </span>
  106.             </div>
  107.         </main>
  108.         <footer>
  109.             <span>数量:<i>1</i></span>
  110.             <span>金额<i>888.00</i></span>
  111.             <button>去结算</button>
  112.         </footer>
  113.     </div>
  114. </body>
  115. </html>

购物车 css

  1. /*引入公共样式*/
  2. @import "public_teset.css";
  4. .shopping{
  5.     width: 1200px;
  6.     background-color: #fff;
  7.     margin: 20px auto;
  8. }
  10. .shopping > h3{
  11.     height: 48px;
  12.     display: flex;
  13.     justify-content: center;
  14.     align-items: center;
  15.     font-size: 1.5rem;
  16.     color: red;
  17. }
  18. /*头部*/
  19. .shopping > header{
  20.     height: 48px;
  21.     display: flex;
  22.     justify-content: space-around;
  23.     align-items: center;
  24.     background-color: #666666;
  25. }
  27. /*内容*/
  28. .shopping > main{
  29.     margin: 10px 0;
  30. }
  32. .shopping > main > .main-top{
  33.     height: 80px;
  34.     display: flex;
  35.     flex-direction: row;
  36.     justify-content: space-around;
  37.     align-items: center;
  38.     border-bottom: 1px #c6c6c6 solid;
  39.     box-sizing: border-box;
  40. }
  41. .shopping > main > .main-top > div > span:first-of-type{
  42.     display: flex;
  43.     align-items: center;
  44.     width: 300px;
  45. }
  46. .shopping > main > .main-top > div > span:first-of-type > a > img{
  47.     height: 60px;
  48.     width: 70px;
  49. }
  51. .shopping > main > .main-top > span:first-of-type{
  52.     position: relative;
  53.     margin-left: 4px;
  54. }
  56. .shopping > main > .main-top > div > span{
  57.     position: relative;
  58.     margin-left: -130px;
  59. }
  61. .shopping > main > .main-top > span:nth-of-type(2){
  62.     position: relative;
  63.     margin-left: -100px;
  64. }
  66. .shopping > main > .main-top > span:nth-of-type(3){
  67.     position: relative;
  68.     margin-left: -10px;
  69. }
  71. .shopping > main > .main-top > span:nth-of-type(3) > input{
  72.     width: 70px;
  73.     height: 20px;
  74. }
  76. .shopping > main > .main-top > span:nth-of-type(4){
  77.     position: relative;
  78.     margin-left: -20px;
  79. }
  80. /*尾部*/
  81. .shopping > footer{
  82.     height: 50px;
  83.     display: flex;
  84.     justify-content: flex-end;
  85.     align-items: center;
  86. }
  88. .shopping > footer > *:not(button){
  89.     /*width: 70px;*/
  90.     margin-right: 20px;
  91. }
  92. .shopping > footer > button{
  93.     border: none;
  94.     background-color: #bd2c00;
  95.     color: white;
  96.     width: 60px;
  97.     height: 40px;
  98.     margin-right: 10px;
  99. }
  101. .shopping > footer > button:hover{
  102.     background-color: #0086b3;
  103.     cursor: pointer;
  104. }

结算页效果图

结算页html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>结算页面</title>
  6.     <link rel="stylesheet" href="jiesuan.css">
  7. </head>
  8. <body>
  9.     <div class="content">
  10.         <div class="nav">
  11.             <!--头部logo-->
  12.             <div class="top">
  13.                 <a href="">
  14.                     <img src="https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@2x.png" alt="">
  15.                 </a>
  16.                 <span>结算页</span>
  17.             </div>
  18.             <h3>填写并核对订单信息</h3>
  19.             <!--内容-->
  20.             <div class="main">
  21.                 <div class="main-top">
  22.                     <h3>收货人信息</h3>
  23.                     <a href="">新增收货地址</a>
  24.                 </div>
  25.                 <div class="nav">
  26.                     <span>程序员 山东 济南市 突然县我发镇 稍等村 184****6039 </span>
  27.                     <span>默认地址</span>
  28.                     <a href="">编辑</a>
  29.                 </div>
  30.             </div>
  31.             <div class="sk">
  32.                 <h3>支付方式</h3>
  33.                 <div class="fs">
  34.                     <span>货到付款</span>
  35.                     <span>在线支付</span>
  36.                     <a href="">更多》</a>
  37.                 </div>
  38.             </div>
  39.             <div class="pay">
  40.                 <div class="jine">
  41.                     <span>应付总额：</span>
  42.                     <span>￥11497.00</span>
  43.                 </div>
  44.                 <div class="dizhi">
  45.                     <span>寄送至： 山东 稍等市 稍等县 稍等镇 稍等村</span>
  46.                     <span> 收货人：稍等 184****6039</span>
  47.                 </div>
  48.             </div>
  49.             <div class="tijiao">
  50.                 <button>提交</button>
  51.             </div>
  52.         </div>
  53.     </div>
  54. </body>
  55. </html>

结算页面css

  1. /*引入公共样式*/
  2. @import "public_teset.css";
  4. .content{
  5.     margin: 20px;
  6.     background-color: white;
  7. }
  9. .content > .nav{
  10.     width: 1200px;
  11.     margin: auto;
  12.     display: flex;
  13.     flex-direction: column;
  14. }
  16. .content > .nav > .top{
  17.     height: 100px;
  18.     width: 400px;
  19.     display: flex;
  20.     flex-direction: row;
  21. }
  22. .content > .nav > .top > span{
  23.     font-size: 19px;
  24.     align-self: center;
  25.     margin: 0 10px;
  26. }
  27. .content > .nav > .top > a {
  28.     display: flex;
  29.     flex-direction: column;
  30.     justify-content: center;
  31. }
  32. .content > .nav > .top > a > img{
  33.     height: 42px;
  34.     width: 134px;
  35.     align-self: flex-end;
  36. }
  37. .content > .nav > h3{
  38.     color: #666666;
  39. }
  41. .content > .nav > .main{
  42.     border: 1px solid #888888;
  43.     box-sizing: border-box;
  44. }
  46. .content > .nav > .main > .main-top{
  47.     height: 38px;
  48.     line-height: 38px;
  49.     display: flex;
  50.     justify-content: space-between;
  51. }
  52. .content > .nav > .main > .nav{
  53.     height: 100px;
  54.     display: flex;
  55.     align-items: center;
  56.     justify-content: space-around;
  57. }
  58. .content > .nav > .main > .nav > span:last-of-type{
  59.     background-color: #888888;
  60. }
  61. .content > .nav > .main > .nav > a:hover{
  62.     color: red;
  63. }
  64. .content > .nav > .sk{
  65.     height: 100px;
  66.     border: 1px solid #888888;
  68.     margin-top: 3px;
  69.     box-sizing: border-box;
  70. }
  71. .content > .nav > .sk > h3{
  72.     height: 38px;
  73.     line-height: 38px;
  74. }
  75. .content > .nav > .sk > .fs{
  76.     width: 300px;
  77.     line-height: 50px;
  78.     display: flex;
  79.     justify-content: space-around;
  80. }
  81. .content > .nav > .sk > .fs > span:hover,a:hover{
  82.     cursor: pointer;
  83. }
  86. .content > .nav > .pay{
  87.     height: 80px;
  88.     display: flex;
  89.     flex-direction: column;
  90. }
  92. .content > .nav > .pay > .jine{
  93.     height: 40px;
  94.     line-height: 40px;
  95.     display: flex;
  96.     justify-content: flex-end;
  97. }
  99. .content > .nav > .pay > .jine > span:last-of-type{
  100.     color: red;
  101.     font-size: 18px;
  102. }
  104. .content > .nav > .pay > .dizhi{
  105.     height: 40px;
  106.     line-height: 40px;
  107.     display: flex;
  108.     justify-content: flex-end;
  109. }
  110. .content > .nav > .pay > .dizhi > span:first-of-type{
  111.     color: #999;
  112. }
  114. .content > .nav > .pay > .dizhi > span:last-of-type{
  115.     color: #999;
  116.     margin-left: 10px;
  117. }
  118. .content > .nav > .tijiao{
  119.     height: 50px;
  120.     display: flex;
  121.     justify-content: flex-end;
  122. }
  123. .content > .nav > .tijiao > button{
  124.     width: 70px;
  125.     height: 38px;
  126.     background-color: red;
  127.     border: none;
  128.     box-sizing: border-box;
  129.     color: white;
  130. }
  131. .content > .nav > .tijiao > button:hover{
  132.     cursor: pointer;
  133. }
上一条：第一批90后30岁了，混迹免费OA圈的厂商如何不被淘汰下一条：12月26日_Laravel的安装与部属和控制器的创建
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多