Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1月1日元旦作业
Blogger Information
Blog 18
fans 0
comment 0
visits 10876
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1月1日元旦作业
- 迷舍人
Original
532 people have browsed it

总结：其实原来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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写页面不可以太死板了, 每一个知识点都会有用武之处的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post