search

博客列表 >前端实践购物车、结算页-PHP培训十期线上班 学号：510251 01月01日作业

前端实践购物车、结算页-PHP培训十期线上班 学号：510251 01月01日作业

赵大叔
赵大叔原创
2020年01月03日 19:00:41818浏览

购物车、结算页

一、购物车

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商城系统购物车</title>
  6.     <link rel="stylesheet" href="shop_shopping_cart.css">
  7. </head>
  8. <body>
  9. <!--引用public-header代码-->
  10. <nav class="public-header">
  11.     <a href="">网站首页</a>
  12.     <a href="">专题</a>
  13.     <a href="">网站导航</a>
  14.     <a href="">二手商品</a>
  15.     <a href="">讨论区</a>
  16.     <span>
  17.         <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  18.         <a href="">免费注册</a>
  19.     </span>
  20. </nav>
  22. <!--购物车-->
  23. <div class="shop-shopping-cart">
  24.    <h3>我的购物车</h3>
  26.    <header>
  27.        <span>
  28.            <input type="checkbox" id="all-selected" checked>
  29.            <label for="all-selected">全选</label>
  30.        </span>
  31.        <span>商品</span>
  32.        <span>单价</span>
  33.        <span>数量</span>
  34.        <span>小计</span>
  35.        <span>操作</span>
  36.    </header>
  38.    <main>
  39.        <div>
  40.            <span>
  41.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  42.            </span>
  44.            <span class="pic-intro">
  45.                <a href=""><img src="static/images/111.jpg" alt=""></a>
  46.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  47.            </span>
  49.            <span><i>&yen;</i>179.00</span>
  51.            <span>
  52.                <label><input type="number" name="choose" checked></label>
  53.            </span>
  55.            <span><i>&yen;</i>179.00</span>
  57.            <span>
  58.                <a href="">删除</a>
  59.                <a href="">移到我的关注</a>
  60.            </span>
  62.        </div>
  63.        <div>
  64.            <span>
  65.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  66.            </span>
  68.            <span class="pic-intro">
  69.                <a href=""><img src="static/images/1111.jpg" alt=""></a>
  70.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  71.            </span>
  73.            <span><i>&yen;</i>179.00</span>
  75.            <span>
  76.                <label><input type="number" name="choose" checked></label>
  77.            </span>
  79.            <span><i>&yen;</i>179.00</span>
  81.            <span>
  82.                <a href="">删除</a>
  83.                <a href="">移到我的关注</a>
  84.            </span>
  86.        </div>
  87.        <div>
  88.            <span>
  89.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  90.            </span>
  92.            <span class="pic-intro">
  93.                <a href=""><img src="static/images/22.jpg" alt=""></a>
  94.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  95.            </span>
  97.            <span><i>&yen;</i>179.00</span>
  99.            <span>
  100.                <label><input type="number" name="choose" checked></label>
  101.            </span>
  103.            <span><i>&yen;</i>179.00</span>
  105.            <span>
  106.                <a href="">删除</a>
  107.                <a href="">移到我的关注</a>
  108.            </span>
  110.        </div>
  111.    </main>
  113.    <footer>
  114.        <span>数量:<i>3</i></span>
  115.        <span>金额:<i>927.00</i></span>
  116.        <button>去结算</button>
  117.    </footer>
  119. </div>
  121. <!--引用public-footer代码-->
  122. <footer class="public-footer">
  123.     <div>
  124.         <a href="">简介</a>
  125.         <a href="">联系我们</a>
  126.         <a href="">招聘信息</a>
  127.         <a href="">友情链接</a>
  128.         <a href="">用户服务协议</a>
  129.         <a href="">隐私权声明</a>
  130.         <a href="">法律投诉声明</a>
  131.     </div>
  132.     <div><span>LOGO</span></div>
  133.     <div>
  134.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  135.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  136.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  137.     </div>
  138.     <div>
  139.         <p>关注公众号</p>
  140.         <img src="static/images/erwei-code.png" alt="">
  141.     </div>
  142. </footer>
  144. </body>
  145. </html>

CSS代码

  1. /*初始化样式*/
  2. @import "static/css/reset.css";
  4. /*引入头部css*/
  5. @import "public_header.css";
  6. /*引入尾部css*/
  7. @import "public_footer.css";
  9. /*购物车整体样式*/
  10. .shop-shopping-cart {
  11.     width: 1200px;
  12.     background-color: #fff;
  13.     margin: 30px auto;
  14.     padding: 15px 0;
  15.     border-radius: 8px;
  16.     box-sizing: border-box;
  17. }
  18. /*鼠标*/
  19. .shop-shopping-cart:hover {
  20.     box-shadow: 0 0 8px #888888;
  21. }
  22. /*标题*/
  23. .shop-shopping-cart > h3 {
  24.     font-size: 20px;
  25.     text-align: center;
  26.     /*取消加粗*/
  27.     font-weight: normal;
  28.     margin-bottom: 20px;
  29. }
  31. /*头部*/
  32. .shop-shopping-cart > header {
  33.     height: 40px;
  34.     border-bottom: 1px solid #cccccc;
  35.     display: flex;
  36.     justify-content: space-around;
  37.     align-items: center;
  38. }
  40. /*主体*/
  41. .shop-shopping-cart > main {
  42.     margin: 20px 0;
  43. }
  44. .shop-shopping-cart > main > div {
  45.     height: 80px;
  46.     display: flex;
  47.     justify-content: space-around;
  48.     align-items: center;
  49. }
  50. .shop-shopping-cart > main > div:hover {
  51.     background-color: lightcyan;
  52. }
  53. .shop-shopping-cart > main > div .pic-intro img {
  54.     width: 60px;
  55.     height: 45px;
  56.     margin-right: 10px;
  57. }
  58. .shop-shopping-cart > main > div .pic-intro {
  59.     /*转为flex，默认水平排列*/
  60.     display: flex;
  61. }
  62. .shop-shopping-cart > main > div .pic-intro > a:last-of-type {
  63.     /*设置宽度，文字描换行*/
  64.     width: 155px;
  65.     margin-left: 40px;
  66. }
  67. .shop-shopping-cart > main > div a:hover {
  68.     background-color: lightcyan;
  69. }
  71. /*调整main之间距离*/
  72. .shop-shopping-cart > main > div > span:first-of-type {
  73.     position: relative;
  74.     left: 33px;
  75. }
  76. .shop-shopping-cart > main > div > .pic-intro {
  77.     position: relative;
  78.     left: 25px;
  79. }
  80. .shop-shopping-cart > main > div > span:nth-of-type(3) {
  81.      position: relative;
  82.      left: -55px;
  83.  }
  84. .shop-shopping-cart > main > div > span:nth-of-type(3) i {
  85.     margin-right: 10px;
  86. }
  87. .shop-shopping-cart > main > div > span:nth-of-type(4) {
  88.     position: relative;
  89.     left: -25px;
  90. }
  91. .shop-shopping-cart > main > div > span:nth-of-type(4) input {
  92.     width: 60px;
  93. }
  94. .shop-shopping-cart > main > div > span:nth-last-of-type(2) {
  95.     position: relative;
  96.     left: 0px;
  97. }
  98. .shop-shopping-cart > main > div > span:nth-last-of-type(2) i {
  99.     margin-right: 10px;
  100.     color: green;
  101. }
  102. .shop-shopping-cart > main > div > span:last-of-type {
  103.     position: relative;
  104.     left: 30px;
  105. }
  106. .shop-shopping-cart > main > div > span:last-of-type i {
  107.     color: green;
  108.     font-size: 1.01rem;
  109.     margin-right: 10px;
  110. }
  112. /*尾部*/
  113. .shop-shopping-cart > footer {
  114.     height: 70px;
  115.     padding: 20px;
  116.     border-top: 1px solid #cccccc;
  117.     box-sizing: border-box;
  118.     display: flex;
  119.     justify-content: flex-end;
  120.     align-items: center;
  121. }
  122. .shop-shopping-cart > footer >*:not(:last-child) {
  123.     width: 180px;
  124. }
  125. .shop-shopping-cart > footer > button {
  126.     height: 40px;
  127.     width: 120px;
  128.     background-color: lightcoral;
  129.     border: none;
  130.     color: white;
  131.     font-size: 1.1rem;
  132. }
  133. .shop-shopping-cart > footer > button:hover{
  134.     background-color: seagreen;
  135.     cursor:pointer;
  136. }
  137. .shop-shopping-cart > footer > span:first-of-type i {
  138.     margin-left: 3px;
  139. }

效果图

二、结算页

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商城结算</title>
  6.     <link rel="stylesheet" href="shop_shooping_pay.css">
  7. </head>
  8. <body>
  9. <div class="shop-shopping-pay">
  10.     <h2>填写并核对定单信息</h2>
  12. <!--    收货信息-->
  13.     <div class="information">
  14.         <div>
  15.             <h3>收货人信息</h3>
  16.             <span>新增收货地址</span>
  17.         </div>
  18.         <span>赵大叔 云南 昆明 ******** 183*******3</span>
  19.         <span>更多地址</span>
  20.     </div>
  22. <!--    支付方式-->
  23.     <div class="payment-mothod">
  24.         <h3>支付方式</h3>
  25.         <div>
  26.             <span>货到付款</span>
  27.             <span>在线支付</span>
  28.             <span>更多</span>
  29.         </div>
  30.     </div>
  32. <!--    送货清单-->
  33.     <div class="delivery-list">
  34.         <h3>送货清单</h3>
  35.         <header>
  36.        <span>
  37.            <input type="checkbox" id="all-selected" checked>
  38.            <label for="all-selected">全选</label>
  39.        </span>
  40.             <span>商品</span>
  41.             <span>单价</span>
  42.             <span>数量</span>
  43.             <span>小计</span>
  44.             <span>操作</span>
  45.         </header>
  46.         <div>
  47.            <span>
  48.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  49.            </span>
  51.             <span class="pic-intro">
  52.                <a href=""><img src=homework/static/images/1111.jpg" alt=""></a>
  53.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  54.            </span>
  56.             <span><i>&yen;</i>179.00</span>
  58.             <span>
  59.                <label><input type="number" name="choose" checked></label>
  60.            </span>
  62.             <span><i>&yen;</i>179.00</span>
  64.             <span>
  65.                <a href="">删除</a>
  66.                <a href="">移到我的关注</a>
  67.            </span>
  69.         </div>
  70.         <div>
  71.            <span>
  72.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  73.            </span>
  75.             <span class="pic-intro">
  76.                <a href=""><img src="homework/static/images/1111.jpg" alt=""></a>
  77.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  78.            </span>
  80.             <span><i>&yen;</i>179.00</span>
  82.             <span>
  83.                <label><input type="number" name="choose" checked></label>
  84.            </span>
  86.             <span><i>&yen;</i>179.00</span>
  88.             <span>
  89.                <a href="">删除</a>
  90.                <a href="">移到我的关注</a>
  91.            </span>
  93.         </div>
  94.         <div>
  95.            <span>
  96.                <label><input type="checkbox" name="count" value="1" min="1"></label>
  97.            </span>
  99.             <span class="pic-intro">
  100.                <a href=""><img src="homework/static/images/22.jpg" alt=""></a>
  101.                <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
  102.            </span>
  104.             <span><i>&yen;</i>179.00</span>
  106.             <span>
  107.                <label><input type="number" name="choose" checked></label>
  108.            </span>
  110.             <span><i>&yen;</i>179.00</span>
  112.             <span>
  113.                <a href="">删除</a>
  114.                <a href="">移到我的关注</a>
  115.            </span>
  117.         </div>
  118.     </div>
  120. <!--    确认支付-->
  121.     <div class="place-order">
  122.         <span><i>应付总额</i>&yen;927.00</span>
  123.         <div>
  124.             <span>寄送至：云南 昆明 ******** </span>
  125.             <span>收货人：赵大叔 183*******3</span>
  126.         </div>
  127.         <button type="button">提交定单</button>
  128.     </div>
  129. </div>
  131. </body>
  132. </html>

CSS代码

  1. @import "homework/static/css/reset.css";
  4. .shop-shopping-pay {
  5.     width: 1000px;
  6.     margin: 10px auto auto;
  7.     /*outline: 1px dashed red;*/
  8. }
  10. .shop-shopping-pay > .information {
  11.     width: 900px;
  12.     margin: 10px auto auto;
  13.     display: flex;
  14.     flex-direction: column;
  15.     border: 1px;
  16. }
  17. .shop-shopping-pay > .information > div {
  18.     display: flex;
  19.     justify-content: space-between;
  20.     margin-top: 10px;
  21. }
  22. .shop-shopping-pay > .information > span {
  23.     margin-left: 30px;
  24. }
  25. .shop-shopping-pay > .payment-mothod {
  26.     width: 900px;
  27.     margin: 10px auto auto;
  28.     display: flex;
  29.     flex-direction: column;
  30. }
  32. .shop-shopping-pay > .payment-mothod > div {
  33.     margin-left: 30px;
  34.     display: flex;
  35. }
  36. /*头部*/
  37. .shop-shopping-pay > .delivery-list > h3 {
  38.     margin-top: 10px;
  39. }
  40. .shop-shopping-pay > .delivery-list > header {
  41.     margin-top: 10px;
  42. }
  43. .shop-shopping-pay > .delivery-list > header {
  44.     height: 40px;
  45.     border-bottom: 1px solid #cccccc;
  46.     display: flex;
  47.     justify-content: space-around;
  48.     align-items: center;
  49. }
  50. .shop-shopping-pay > .delivery-list {
  51.     width: 900px;
  52.     margin: auto;
  53. }
  54. .shop-shopping-pay > .delivery-list > div {
  55.     margin-left: 30px;
  56. }
  58. .shop-shopping-pay > .delivery-list > div {
  59.     height: 80px;
  60.     display: flex;
  61.     justify-content: space-around;
  62.     align-items: center;
  63. }
  64. .shop-shopping-pay > .delivery-list > div:hover {
  65.     background-color: lightcyan;
  66. }
  67. .shop-shopping-pay > .delivery-list > div .pic-intro img {
  68.     width: 70px;
  69.     height: 70px;
  70. }
  71. .shop-shopping-pay > .delivery-list > div .pic-intro {
  72.     /*转为flex，默认水平排列*/
  73.     display: flex;
  74. }
  75. .shop-shopping-pay > .delivery-list > div .pic-intro > a:last-of-type {
  76.     /*设置宽度，文字描换行*/
  77.     width: 100px;
  78.     margin-left: 5px;
  79. }
  80. .shop-shopping-pay > .delivery-list > div a:hover {
  81.     background-color: lightcyan;
  82. }
  84. /*调整main之间距离*/
  85. .shop-shopping-pay > .delivery-list > div > span:first-of-type {
  86.     position: relative;
  87. }
  88. .shop-shopping-pay > .delivery-list > div > .pic-intro {
  89.     position: relative;
  90.     left: 10px;
  91. }
  92. .shop-shopping-pay > .delivery-list > div > span:nth-of-type(3) {
  93.     position: relative;
  94.     left: -25px;
  95. }
  96. .shop-shopping-pay > .delivery-list > div > span:nth-of-type(3) i {
  97.     margin-right: 5px;
  98. }
  99. .shop-shopping-pay > .delivery-list > div > span:nth-of-type(4) {
  100.     position: relative;
  101.     left: -1px;
  102. }
  103. .shop-shopping-pay > .delivery-list > div > span:nth-of-type(4) input {
  104.     width: 60px;
  105. }
  106. .shop-shopping-pay > .delivery-list > div > span:nth-last-of-type(2) {
  107.     position: relative;
  108.     left: 20px;
  109. }
  110. .shop-shopping-pay > .delivery-list > div > span:nth-last-of-type(2) i {
  111.     margin-right: 10px;
  112.     color: green;
  113. }
  114. .shop-shopping-pay > .delivery-list > div > span:last-of-type {
  115.     position: relative;
  116.     left: 30px;
  117. }
  118. .shop-shopping-pay > .delivery-list > div > span:last-of-type i {
  119.     color: green;
  120.     font-size: 1.01rem;
  121.     margin-right: 10px;
  122. }
  124. .shop-shopping-pay > .place-order {
  125.     width: 900px;
  126.     margin: 10px auto auto;
  127.     display: flex;
  128.     flex-direction: column;
  129.     align-items: flex-end;
  130. }
  131. .shop-shopping-pay > .place-order div {
  132.     display: flex;
  133. }
  134. .shop-shopping-pay > .place-order > span:first-of-type i {
  135.     margin-right: 30px;
  136. }
  137. .shop-shopping-pay > .place-order > button {
  138.     width: 150px;
  139.     height: 35px;
  140.     background-color: red;
  141.     color: white;
  142.     font-size: 1.2rem;
  143. }

效果图

个人总结：
堪称最丑结算页面了，页面美化方面十分欠缺。

上一条：grid容器和项目属性详解--PHP线上班十期1230下一条：Grid布局之旅-Grid基础知识-PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多