search

博客列表 >2020年元旦作业编写商城购物车

2020年元旦作业编写商城购物车

阿喜
阿喜原创
2020年01月06日 10:19:59467浏览

作业：商城购物车

商城购物车效果图示：


购物车页面最外一个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. }
上一条：1230gird布局语法总结下一条：0103作业-PHP变量的类型、创建方式和打印输出-php培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多