Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020年元旦作业编写商城购物车
Blogger Information
Blog 5
fans 0
comment 0
visits 2754
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
2020年元旦作业编写商城购物车
阿喜
Original
463 people have browsed it

作业：商城购物车

商城购物车效果图示：


购物车页面最外一个div：shop-shopping-cart分成上中下三部分header,main和footer
在ｍain的主体区域最外层：shop-main，中间分上下两部分，店铺与商品shop-name 和shop-item-main
主要架构想清楚，就一步步的好写了。

html源代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商城结算页</title>
  6.     <link rel="stylesheet" href="shop.css">
  7. </head>
  8. <body>
  9. <div class="public-header">
  10.     <a href="">网站首页</a>
  11.     <a href="">专题</a>
  12.     <a href="">网站导航</a>
  13.     <a href="">二手商品</a>
  14.     <a href="">讨论区</a>
  15.     <span>
  16.         <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  17.         <a href="">注册</a>
  18.     </span>
  19. </div>
  20. <div class="shop-shopping-cart">
  21.     <!--购物车头部-->
  22.     <header>
  23. <span>
  24.     <input checked id="all-select" name="all-select" type="checkbox">
  25.     <label for="all-select">全选</label>
  26. </span>
  27.         <span>商品</span>
  28.         <span>属性</span>
  29.         <span>单价</span>
  30.         <span>数量</span>
  31.         <span>金额</span>
  32.         <span>操作</span>
  33.     </header>
  34.     <!--购物车主体部分-->
  35.     <main>
  36.         <div class="shop-main">
  37.             <div class="shop-name">
  38.                 <label for="all-select-shop"><input checked id="all-select-shop" name="all-select-shop" type="checkbox"></label>
  39.                 <a href="">店铺：PHP中文网测试网店</a>
  40.             </div>
  41.             <div class="shop-item-main">
  42.                 <div class="shop-item-details">
  43.                     <input checked id="select-details" name="select-details" type="checkbox">
  44.                     <a href="#"><img src="../static/images/shop/shop1.jpg"></a>
  45.                     <a href="#">产品信息介绍这个是什么样的东西，这是产品简介</a>
  46.                     <div class="details-type">
  47.                         <span>规格：红色</span>
  48.                         <span>尺寸：500*300</span>
  49.                     </div>
  50.                     <span><i>&yen;</i>500.00</span>
  51.                     <span><label><input min="1" name="count" type="number" value="1"></label></span>
  52.                     <span>500.00</span>
  53.                     <span><a href="#">删除</a></span>
  54.                 </div>
  55.                 <div class="shop-item-details">
  56.                     <input checked id="select-details" name="select-details" type="checkbox">
  57.                     <a href="#"><img src="../static/images/shop/shop2.jpg"></a>
  58.                     <a href="#">产品信息介绍这个是什么样的东西，这是产品简介</a>
  59.                     <div class="details-type">
  60.                         <span>规格：红色</span>
  61.                         <span>尺寸：500*300</span>
  62.                     </div>
  63.                     <span><i>&yen;</i>500.00</span>
  64.                     <span><label><input min="1" name="count" type="number" value="1"></label></span>
  65.                     <span>500.00</span>
  66.                     <span><a href="#">删除</a></span>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.         <div class="shop-main">
  71.             <div class="shop-name">
  72.                 <label for="all-select-shop"><input checked id="all-select-shop" name="all-select-shop" type="checkbox"></label>
  73.                 <a href="">店铺：PHP源代码商城</a>
  74.             </div>
  75.             <div class="shop-item-main">
  76.                 <div class="shop-item-details">
  77.                     <input checked id="select-details" name="select-details" type="checkbox">
  78.                     <a href="#"><img src="../static/images/shop/shop3.jpg"></a>
  79.                     <a href="#">产品信息介绍这个是什么样的东西，这是产品简介</a>
  80.                     <div class="details-type">
  81.                         <span>规格：红色</span>
  82.                         <span>尺寸：500*300</span>
  83.                     </div>
  84.                     <span><i>&yen;</i>500.00</span>
  85.                     <span><label><input min="1" name="count" type="number" value="1"></label></span>
  86.                     <span>500.00</span>
  87.                     <span><a href="#">删除</a></span>
  88.                 </div>
  89.                 <div class="shop-item-details">
  90.                     <input checked id="select-details" name="select-details" type="checkbox">
  91.                     <a href="#"><img src="../static/images/shop/shop4.jpg"></a>
  92.                     <a href="#">产品信息介绍这个是什么样的东西，这是产品简介</a>
  93.                     <div class="details-type">
  94.                         <span>规格：红色</span>
  95.                         <span>尺寸：500*300</span>
  96.                     </div>
  97.                     <span><i>&yen;</i>800.00</span>
  98.                     <span><label><input min="1" name="count" type="number" value="1"></label></span>
  99.                     <span>800.00</span>
  100.                     <span><a href="#">删除</a></span>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </main>
  105.     <!--购物车底部-->
  106.     <footer>
  107.         <span>已选商品<i>4</i>件</span>
  108.         <span>共计:<i>2300.00</i>元</span>
  109.         <button>去结算</button>
  110.     </footer>
  111. </div>
  112. <footer class="public-footer">
  113.     <div>
  114.         <a href="">简介</a>
  115.         <a href="">联系我们</a>
  116.         <a href="">招聘信息</a>
  117.         <a href="">友情链接</a>
  118.         <a href="">用户服务协议</a>
  119.         <a href="">隐私权声明</a>
  120.         <a href="">法律投诉声明</a>
  121.     </div>
  122.     <div>
  123.         <span>LOGO</span>
  124.     </div>
  125.     <div>
  126.         <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  127.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  128.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  129.     </div>
  130.     <div>
  131.         <p>关注公众号</p>
  132.         <img src="../static/images/erwei-code.png" alt="">
  133.     </div>
  134. </footer>
  135. </body>
  136. </html>

CSS代码：

css都是引入公共部分的CSS样式：
@import “public-reset.css”;
@import “public-header.css”;
@import “shop-shopping-cart.css”;
@import “public-footer.css”;

这几个CSS样式如下：

public-reset样式

  1. /*初始化*/
  2. * {
  3.     margin: 0px;
  4.     padding: 0px;
  5.     /*初始化红线*/
  6.     /*outline: 1px dashed red;*/
  7. }
  8. body{
  9.     font-size: 13px;
  10.     background-color: #efefef;
  11.     color:#555555;
  12. }
  13. /*初始化A标签*/
  14. a {
  15.     font-size: 13px;
  16.     text-decoration: none;
  17.     color: #404040;
  18. }
  19. /*去掉列表的小黑点*/
  20. li{
  21.     list-style-type: none;
  22. }

public-header样式

  1. /*导入初始化css*/
  2. @import "public-reset.css";
  3. /*全部导航样式*/
  4. .public-header{
  5.     height: 44px;
  6.     background-color:black;
  7.     padding: 0 10px;
  8.     display: flex;
  9.     /*水平不换行*/
  10.     flex-flow: row nowrap;
  11. }
  12. /*设置左侧连接样式*/
  13. .public-header a{
  14.     line-height: 44px;
  15.     color: #cccccc;
  16.     padding: 0 10px;
  17. }
  18. .public-header > a:hover{
  19.     background-color: #fff;
  20.     color: black;
  21. }
  22. /*设置右侧样式*/
  23. .public-header > span{
  24.     margin-left: auto;
  25.     padding: 0,20px;
  26. }
  27. .public-header > span i{
  28.     font-size: 16px;
  29.     padding-right: 10px;
  30. }

shop-shopping-cart样式

  1. @import "public-reset.css";
  3. /*购物车样式表*/
  4. .shop-shopping-cart{
  5.     padding: 10px;
  6.     margin: auto;
  7.     width: 1200px;
  8.     background-color: #fff;
  9.     border-radius: 5px;
  10. }
  11. .shop-shopping-cart>header{
  12.     display: flex;
  13.     padding: 20px 80px 20px 20px;
  14.     box-sizing: border-box;
  15.     height: 40px;
  16.     align-items: center;
  17.     justify-content:space-between;
  18.     border-bottom: 1px solid #888888;
  19.     font-size: 16px;
  20.     font-weight: bolder;
  21. }
  22. .shop-shopping-cart>main>.shop-main{
  23.     box-sizing: border-box;
  24.     display: flex;
  25.     flex-flow: column wrap;
  26.     margin: 10px 0;
  28. }
  29. .shop-shopping-cart>main>.shop-main>.shop-name{
  30.     padding: 0px 0px 0px 20px;
  31.     height: 40px;
  32.     display: flex;
  33.     font-size: 14px;
  34.     line-height: 40px;
  35.     text-align: center;
  36.     justify-content:flex-start;
  37. }
  38. .shop-shopping-cart>main>.shop-main>.shop-name a{
  39.     font-size: 14px;
  40. }
  41. .shop-shopping-cart>main>.shop-main>.shop-name a:hover{
  42.     font-size: 14px;
  43.     color: #178cee;
  44.     cursor: pointer;
  45. }
  46. .shop-shopping-cart>main>.shop-main>.shop-item-main{
  47.     height: auto;
  48.     border: 1px solid #888888;
  49.     border-radius: 3px;
  50. }
  51. .shop-shopping-cart>main>.shop-main>.shop-item-main:hover{
  52.     box-shadow: 0 0  5px #888888;
  53. }
  54. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details{
  55.     display: flex;
  56.     padding: 15px 30px;
  57.     box-sizing: border-box;
  58. }
  59. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details:hover{
  60.     background-color:#fff0f0;
  61. }
  62. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details img{
  63.     width: 150px;
  64.     height: 80px;
  65.     border-radius: 5px;
  66. }
  67. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details > a:last-of-type{
  68.     width: 150px;
  69.     padding-left: 20px;
  70.     padding-top: 10px;
  71. }
  72. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >.details-type{
  73.     display: flex;
  74.     flex-flow: column wrap;
  75.     padding-left: 20px;
  76.     box-sizing: border-box;
  77.  }
  78. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >.details-type>span{
  79.     font-size: 12px;
  80.     color: #888888;
  81.     padding: 10px 0;
  82. }
  83. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >span:nth-of-type(1){
  84.     color: black;
  85.     font-size: 14px;
  86.     position: relative;
  87.     left: 90px;
  88.     padding-top: 10px;
  89.     letter-spacing:3px;
  90. }
  91. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >span:nth-of-type(1) i{
  92.     color: #669900;
  93.     font-size: 16px;
  94.     font-weight: bold;
  95. }
  96. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >span:nth-of-type(2){
  97.     position: relative;
  98.     left: 200px;
  99.     padding-top: 10px;
  100. }
  101. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >span:nth-of-type(2) input{
  102.     width: 40px;
  103. }
  104. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details >span:nth-of-type(3){
  105.     position: relative;
  106.     left:320px;
  107.     padding-top: 10px;
  108.     color: black;
  109.     font-size: 14px;
  110.     letter-spacing:2px;
  111. }
  112. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details>span:nth-of-type(4){
  113.     position: relative;
  114.     left: 450px;
  115.     padding-top: 10px;
  116. }
  117. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details>span:nth-of-type(4)a{
  118.     font-size: 14px;
  119. }
  120. .shop-shopping-cart>main>.shop-main>.shop-item-main>.shop-item-details>span:nth-of-type(4)a:hover{
  121.     color: red;
  122.     cursor: pointer;
  123.     font-weight: bolder;
  124.     font-size: 16px;
  125. }
  126. .shop-shopping-cart>footer{
  127.     display: flex;
  128.     height: 60px;
  129.     padding:40px;
  130.     box-sizing: border-box;
  131.     border-top: 1px solid #888888;
  132.     justify-content: flex-end;
  133.     align-items: center;
  134. }
  135. .shop-shopping-cart>footer>span{
  136.    font-size: 14px;
  137.    font-weight: bold;
  138.    padding-right: 20px;
  139.     letter-spacing:2px;
  140. }
  141. .shop-shopping-cart>footer>span i{
  142.     color: red;
  143.     font-size: 14px;
  144. }
  145. .shop-shopping-cart>footer>button{
  146.     height: 38px;
  147.     padding: 0 20px;
  148.     font-size: 16px;
  149.     justify-content: center;
  150.     align-self: center;
  151.     background-color:#f64c59;
  152.     color: #fff;
  153.     border: none;
  154. }
  155. .shop-shopping-cart>footer>button:hover{
  156.     cursor: pointer;
  157.     background-color: #178cee;
  158.     color: #fffdef;
  159. }

public-footer样式

  1. @import "public-reset.css";
  2. .public-footer {
  3.     /*基本样式*/
  4.     background-color: #282c31;
  5.     color: #959ba2;
  6.     padding: 30px;
  7.     display: grid;
  8.     grid-template-columns: 130px 550px 400px;
  9.     grid-template-rows: 30px 160px;
  10.     grid-template-areas: 'link link rwm'
  11.     'logo info rwm';
  12.     justify-content: center;
  13. }
  14. .public-footer>div:first-of-type{
  15.     grid-area: link;
  16. }
  17. /*设置头部导航中的链接样式*/
  18. .public-footer > div:first-of-type a {
  19.     color: #959ba2;
  20.     padding: 5px 15px;
  21. }
  23. /*LOGO占位符样式*/
  24. .public-footer > div:nth-of-type(2) {
  25.     /*网格区域名称*/
  26.     grid-area: logo;
  27.     /*基本样式*/
  28.     font-size: 30px;
  29.     margin-top: 40px;
  30. }
  32. /*版权备案号等其它信息*/
  33. .public-footer > div:nth-of-type(3) {
  34.     /*网格区域名称*/
  35.     grid-area: info;
  36.     /*基本样式*/
  37.     font-size: 13px;
  38.     line-height: 40px;
  39. }
  41. /*二维码样式*/
  42. .public-footer > div:last-of-type {
  43.     /*网格区域名称*/
  44.     grid-area: rwm;
  46.     /*基本样式*/
  47.     border-left: 1px solid #000;
  48.     padding-left: 40px;
  49. }
  51. /*二维码上的描述文本样式*/
  52. .public-footer > div:last-of-type p {
  53.     font-size: 13px;
  54.     margin-left: 20px;
  55. }
  57. /*二维码图片样式*/
  58. .public-footer > div:last-of-type img {
  59.     width: 110px;
  60.     height: 110px;
  61.     margin-top: 10px;
  62. }
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