search

博客列表 >0101-购物车结算页面

0101-购物车结算页面


原创
2020年01月05日 23:11:201489浏览

购物车页面

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="shopcar.css">
  6.     <title>购物车</title>
  7. </head>
  8. <body>
  9.     <!-- 头部 -->
  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>
  21. <!--商城购物车-->
  22. <div class="shop-shopping-cart">
  23.     <div class="public-headline">
  24.         <span>购物车</span>
  25.     </div>
  26.     <!--购物车头部-->
  27.     <header>
  28.         <!--flex-->
  29.         <span>
  30.             <input type="checkbox" id="all-selected" checked>
  31.             <label for="all-selected">全选</label>
  32.         </span>
  33.         <span>商品</span>
  34.         <span>单价</span>
  35.         <span>数量</span>
  36.         <span>小计</span>
  37.         <span>操作</span>
  38.     </header>
  40.     <!--购物车主体-->
  41.     <main>
  42.         <div>
  43.             <span>
  44.                 <label><input type="checkbox" name="choose" checked></label>
  45.             </span>
  46.             <!--图文介绍-->
  47.             <span class="pic-intro">
  48.                 <a href=""><img src="../../../static/images/11.jpg" alt=""></a>
  49.                 <a href="">一个商品介绍</a>
  50.             </span>
  52.             <span>998.00</span>
  53.             <span>
  54.                 <label><input type="number" name="count" value="1" min="1"></label>
  55.             </span>
  56.             <span><i>&yen;</i>998.00</span>
  57.             <span><a href="">删除</a></span>
  58.         </div>
  59.         <div>
  60.             <span>
  61.                 <label><input type="checkbox" name="choose" checked></label>
  62.             </span>
  63.             <!--图文介绍-->
  64.             <span class="pic-intro">
  65.                 <a href=""><img src="../../../static/images/11.jpg" alt=""></a>
  66.                 <a href="">一个商品介绍</a>
  67.             </span>
  69.             <span>998.00</span>
  70.             <span>
  71.                 <label><input type="number" name="count" value="1" min="1"></label>
  72.             </span>
  73.             <span><i>&yen;</i>998.00</span>
  74.             <span><a href="">删除</a></span>
  75.         </div>
  76.     </main>
  78.     <!--购物车底部-->
  79.     <div>
  80.         <span>数量: <i>2</i></span>
  81.         <span>金额: <i>1996.00</i></span>
  82.         <button>结算</button>
  83.     </div>
  84.     <!-- 脚部 -->
  85.     <footer class="public-footer">
  86.         <div>
  87.             <a href="">简介</a>
  88.             <a href="">联系我们</a>
  89.             <a href="">招聘信息</a>
  90.             <a href="">友情链接</a>
  91.             <a href="">用户服务协议</a>
  92.             <a href="">隐私权声明</a>
  93.             <a href="">法律投诉声明</a>
  94.         </div>
  95.         <div><span>LOGO</span></div>
  96.         <div>
  97.             <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  98.             <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  99.             <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  100.         </div>
  101.         <div>
  102.             <p>关注公众号</p>
  103.             <img src="../../../static/images/erwei-code.png" alt="">
  104.         </div>
  105.     </footer>
  107. </body>
  108. </html>

CSS

  1. @import "../public-reset.css";
  2. @import "../../shop/shopcar/public_header/public_header.css";
  3. @import "../../shop/shopcar/public_headline/public_headline.css";
  4. @import "../../shop/shopcar/public_footer/public_footer.css";
  5. .shop-shopping-cart {
  6.     width: 1200px;
  7.     background-color: #fff;
  8.     margin: 30px auto;
  9.     padding: 15px 0;
  10.     border-radius: 8px;
  11.     box-sizing: border-box;
  12. }
  14. .shop-shopping-cart:hover {
  15.     box-shadow: 0 0 8px #888888;
  16. }
  18. /*标题*/
  19. .shop-shopping-cart > .public-headline > span {
  20.     font-size: 20px;
  21.     text-align: center;
  22.     font-weight: normal;
  23.     margin-bottom: 20px;
  24.     margin: auto;
  25. }
  27. /*购物车头部*/
  28. .shop-shopping-cart > header {
  29.     height: 40px;
  30.     border-bottom: 1px solid #cccccc;
  32.     /*flex*/
  33.     display: flex;
  34.     justify-content: space-around;
  35.     align-items: center;
  36. }
  38. /*购物车主体*/
  39. .shop-shopping-cart > main {
  40.     margin: 20px 0;
  41. }
  43. /*购物车中的每一条记录, 每一个商品*/
  44. .shop-shopping-cart > main > div {
  45.     height: 80px;
  47.     /*flex*/
  48.     display: flex;
  49.     justify-content: space-around;
  50.     align-items: center;
  51. }
  52. .shop-shopping-cart > main > div:hover {
  53.     background-color: lightcyan;
  54. }
  56. .shop-shopping-cart > main > div .pic-intro {
  57.     width: 250px;
  58.     display: flex;
  59.     align-items: center;
  61. }
  63. .shop-shopping-cart > main > div .pic-intro img {
  64.     width: 60px;
  65.     height: 45px;
  66.     margin-right: 10px;
  67. }
  69. .shop-shopping-cart > main > div a:hover {
  70.     color: lightcoral;
  71. }
  73. /*微调第一个复选框*/
  74. .shop-shopping-cart > main > div > span:first-of-type {
  75.     position: relative;
  76.     left: 25px;
  77. }
  78. .shop-shopping-cart > main > div > span.pic-intro {
  79.     position: relative;
  80.     left: -40px;
  81. }
  82. .shop-shopping-cart > main > div > span:nth-of-type(3) {
  83.     position: relative;
  84.     left: -80px;
  85. }
  87. .shop-shopping-cart > main > div > span:nth-of-type(4) {
  88.     position: relative;
  89.     left: -60px;
  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: -50px;
  97. }
  98. .shop-shopping-cart > main > div > span:last-of-type {
  99.     position: relative;
  100.     left: -50px;
  101. }
  102. .shop-shopping-cart > main > div > span:nth-last-of-type(2) i {
  103.     color: green;
  104.     font-size: 1.01rem;
  105.     margin-right: 3px;
  106. }
  108. /*购物车底部*/
  109. .shop-shopping-cart > div {
  110.     height: 70px;
  112.     padding: 20px;
  113.     border-top: 1px solid #cccccc;
  114.     box-sizing: border-box;
  116.     display: flex;
  117.     justify-content: flex-end;
  118.     align-items: center;
  119. }
  121. .shop-shopping-cart > div > *:not(:last-child) {
  122.     width: 180px;
  123. }
  125. .shop-shopping-cart > div > 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 > div > button:hover {
  134.     background-color: seagreen;
  135.     cursor: pointer;
  136. }

效果图

结算页面

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="shopjiesuan.css">
  6.     <title>购物车结算</title>
  7. </head>
  8. <body>
  9.     <!-- 头部 -->
  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>
  21. <!--商城购物车-->
  22. <div class="shop-shopping-cart">
  23.     <div class="public-headline">
  24.         <span>购物车结算</span>
  25.     </div>
  27.             <!-- 收货地址 -->
  28.             <div class="address-list">
  29.                 <div class="title">
  30.                     <h4>确认收货地址</h4>
  31.                 </div>
  32.                 <div class="list-item active">
  33.                     <span>寄送至</span>
  34.                     <div>
  35.                         <input type="radio" name="address" id="address_1" checked>
  36.                         <label for="address_1">XX省  XX市 XX区 XX街道  XX收</label>
  37.                     </div>
  38.                     <a href="#">修改本地址</a>
  39.                 </div>
  40.                 <div class="list-item">
  41.                     <span></span>
  42.                     <div>
  43.                         <input type="radio" name="address" id="address_2">
  44.                         <label for="address_2">XX省  XX市 XX区 XX街道  XX收</label>
  45.                     </div>
  46.                 </div>
  47.             </div>
  49.     <!--购物车头部-->
  50.     <header>
  51.         <!--flex-->
  52.         <span>
  53.             <input type="checkbox" id="all-selected" checked>
  54.             <label for="all-selected">全选</label>
  55.         </span>
  56.         <span>商品</span>
  57.         <span>单价</span>
  58.         <span>数量</span>
  59.         <span>小计</span>
  60.         <span>操作</span>
  61.     </header>
  63.     <!--购物车主体-->
  64.     <main>
  65.         <div>
  66.             <span>
  67.                 <label><input type="checkbox" name="choose" checked></label>
  68.             </span>
  69.             <!--图文介绍-->
  70.             <span class="pic-intro">
  71.                 <a href=""><img src="../../../static/images/11.jpg" alt=""></a>
  72.                 <a href="">一个商品介绍</a>
  73.             </span>
  75.             <span>998.00</span>
  76.             <span>
  77.                 <label><input type="number" name="count" value="1" min="1"></label>
  78.             </span>
  79.             <span><i>&yen;</i>998.00</span>
  80.             <span><a href="">删除</a></span>
  81.         </div>
  82.         <div>
  83.             <span>
  84.                 <label><input type="checkbox" name="choose" checked></label>
  85.             </span>
  86.             <!--图文介绍-->
  87.             <span class="pic-intro">
  88.                 <a href=""><img src="../../../static/images/11.jpg" alt=""></a>
  89.                 <a href="">一个商品介绍</a>
  90.             </span>
  92.             <span>998.00</span>
  93.             <span>
  94.                 <label><input type="number" name="count" value="1" min="1"></label>
  95.             </span>
  96.             <span><i>&yen;</i>998.00</span>
  97.             <span><a href="">删除</a></span>
  98.         </div>
  99.     </main>
  100.     <div class="pay-info">
  101.         <div>
  102.             <span>
  103.                 <span>实付款：</span>
  104.                 <span class="price"><i>&yen;</i>1996.00</span>
  105.             </span>
  106.             <span><span>寄送至：</span>XX省  XX市 XX区 XX街道</span>
  107.             <span><span>收货人：</span>XX   18888888888</span>
  108.         </div>
  109.         <div>
  110.             <a href="#"><i class="iconfont icon-shangyibu"></i>返回购物车</a>
  111.             <button>提交订单</button>
  112.         </div>
  113.     </div>
  116.     <!-- 脚部 -->
  117.     <footer class="public-footer">
  118.         <div>
  119.             <a href="">简介</a>
  120.             <a href="">联系我们</a>
  121.             <a href="">招聘信息</a>
  122.             <a href="">友情链接</a>
  123.             <a href="">用户服务协议</a>
  124.             <a href="">隐私权声明</a>
  125.             <a href="">法律投诉声明</a>
  126.         </div>
  127.         <div><span>LOGO</span></div>
  128.         <div>
  129.             <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  130.             <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  131.             <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  132.         </div>
  133.         <div>
  134.             <p>关注公众号</p>
  135.             <img src="../../../static/images/erwei-code.png" alt="">
  136.         </div>
  137.     </footer>
  138. </div>
  139. </body>
  140. </html>

CSS

  1. @import "../public-reset.css";
  2. @import "../../shop/shopcar/public_header/public_header.css";
  3. @import "../../shop/shopcar/public_headline/public_headline.css";
  4. @import "../../shop/shopcar/public_footer/public_footer.css";
  5. .shop-shopping-cart {
  6.     width: 1200px;
  7.     background-color: #fff;
  8.     margin: 30px auto;
  9.     padding: 15px 0;
  10.     border-radius: 8px;
  11.     box-sizing: border-box;
  12. }
  14. .shop-shopping-cart:hover {
  15.     box-shadow: 0 0 8px #888888;
  16. }
  18. /*标题*/
  19. .shop-shopping-cart > .public-headline > span {
  20.     font-size: 20px;
  21.     text-align: center;
  22.     font-weight: normal;
  23.     margin-bottom: 20px;
  24.     margin: auto;
  25. }
  27. /*收货地址*/
  28. .shop-shopping-cart > .address-list{
  29.     display: flex;
  30.     flex-flow: column wrap;
  31. }
  32. .shop-shopping-cart > .address-list > .list-item{
  33.     margin-top: 10px;
  34.     width: 500px;
  35.     height: 30px;
  36.     padding: 0 20px;
  37.     box-sizing: border-box;
  38.     display: grid;
  39.     grid-template-columns: 80px 1fr 80px;
  40.     font-size: 13px;
  41.     line-height: 30px;
  42. }
  43. .shop-shopping-cart > .address-list > .list-item:hover{
  44.     background-color: #fff0e8;
  45.     cursor: pointer;
  46. }
  47. .active{
  48.     border:1px solid lightcoral;
  49.     background-color: #fff0e8;
  50.     box-shadow: 5px 5px 0 #f3f3f3;
  51.     font-weight: bold;
  52. }
  53. .active > span:first-child{
  54.     color:lightcoral;
  55. }
  57. /*购物车头部*/
  58. .shop-shopping-cart > header {
  59.     height: 40px;
  60.     border-bottom: 1px solid #cccccc;
  62.     /*flex*/
  63.     display: flex;
  64.     justify-content: space-around;
  65.     align-items: center;
  66. }
  68. /*购物车主体*/
  69. .shop-shopping-cart > main {
  70.     margin: 20px 0;
  71. }
  73. /*购物车中的每一条记录, 每一个商品*/
  74. .shop-shopping-cart > main > div {
  75.     height: 80px;
  77.     /*flex*/
  78.     display: flex;
  79.     justify-content: space-around;
  80.     align-items: center;
  81. }
  82. .shop-shopping-cart > main > div:hover {
  83.     background-color: lightcyan;
  84. }
  86. .shop-shopping-cart > main > div .pic-intro {
  87.     width: 250px;
  88.     display: flex;
  89.     align-items: center;
  91. }
  93. .shop-shopping-cart > main > div .pic-intro img {
  94.     width: 60px;
  95.     height: 45px;
  96.     margin-right: 10px;
  97. }
  99. .shop-shopping-cart > main > div a:hover {
  100.     color: lightcoral;
  101. }
  103. /*微调第一个复选框*/
  104. .shop-shopping-cart > main > div > span:first-of-type {
  105.     position: relative;
  106.     left: 25px;
  107. }
  108. .shop-shopping-cart > main > div > span.pic-intro {
  109.     position: relative;
  110.     left: -40px;
  111. }
  112. .shop-shopping-cart > main > div > span:nth-of-type(3) {
  113.     position: relative;
  114.     left: -80px;
  115. }
  117. .shop-shopping-cart > main > div > span:nth-of-type(4) {
  118.     position: relative;
  119.     left: -60px;
  120. }
  121. .shop-shopping-cart > main > div > span:nth-of-type(4) input {
  122.     width: 60px;
  123. }
  124. .shop-shopping-cart > main > div > span:nth-last-of-type(2) {
  125.     position: relative;
  126.     left: -50px;
  127. }
  128. .shop-shopping-cart > main > div > span:last-of-type {
  129.     position: relative;
  130.     left: -50px;
  131. }
  132. .shop-shopping-cart > main > div > span:nth-last-of-type(2) i {
  133.     color: green;
  134.     font-size: 1.01rem;
  135.     margin-right: 3px;
  136. }
  138. /*购物车底部*/
  139. .shop-shopping-cart > div {
  140.     height: 70px;
  142.     padding: 20px;
  143.     border-top: 1px solid #cccccc;
  144.     box-sizing: border-box;
  146.     display: flex;
  147.     justify-content: flex-end;
  148.     align-items: center;
  149. }
  151. .shop-shopping-cart > div > *:not(:last-child) {
  152.     width: 180px;
  153. }
  155. .shop-shopping-cart > div > button {
  156.     height: 40px;
  157.     width: 120px;
  158.     background-color: lightcoral;
  159.     border: none;
  160.     color: white;
  161.     font-size: 1.1rem;
  162. }
  163. .shop-shopping-cart > div > button:hover {
  164.     background-color: seagreen;
  165.     cursor: pointer;
  166. }
  168. .shop-shopping-cart > .pay-info{
  169.     width: 1200px;
  170.     height: 200px;
  171.     display: flex;
  172.     margin-top: 20px;
  173.     flex-direction: column;
  174.     justify-content: flex-end;
  175. }
  176. .shop-shopping-cart > .pay-info > div{
  177.     margin-left: auto;
  178.     width:300px;
  179.     font-size: 13px;
  180. }
  181. .shop-shopping-cart > .pay-info > div:first-child{
  182.     border: 1px solid lightcoral;
  183.     text-align: right;
  184.     display: grid;
  185.     line-height: 30px;
  186.     padding:10px;
  187. }
  188. .shop-shopping-cart > .pay-info > div:first-child > span > span{
  189.     font-weight: bold;
  190. }
  191. .shop-shopping-cart > .pay-info > div:first-child > span:first-child > span:last-child{
  192.     font-size: 25px;
  193. }
  194. .shop-shopping-cart > .pay-info > div:last-child{
  195.     width:320px;
  196.     display: grid;
  197.     grid-template-rows: 30px;
  198.     grid-template-columns: 1fr 1fr;
  199. }
  200. .shop-shopping-cart > .pay-info > div:last-child > a{
  201.     justify-self: center;
  202.     align-self: center;
  203. }
  204. .shop-shopping-cart > .pay-info > div:last-child > button{
  205.     border: none;
  206.     background-color: lightcoral;
  207.     color: #fff;
  208. }

效果图

两页面主体部分内容相似代码共用

上一条：12月30日_blade模板引擎和数据库基本操作下一条：第十期PHP基础知识数据变量定义及输出（2020-01-03）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多