Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1231作业-仿写淘宝购物车页面-php培训十期线上班
Blogger Information
Blog 22
fans 1
comment 0
visits 20157
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
1231作业-仿写淘宝购物车页面-php培训十期线上班
Dseven
Original
919 people have browsed it

1.作业要求

仿写淘宝购物车页面的主体部分，页头和页脚用之前做的组件进行拼装
仿写对象：

2.完成思路

2.1对仿写对象进行布局分析，确定各主要区块，明确各区块的主要实现方法，初步确定DOM结构。

2.2在DOM结构确定的基础上，通过web控制台打开仿写页面，查看各主要元素的长、宽、字体、颜色、圆角、间距等内容。

2.3打开仿写页面点击鼠标右键，选择页面另存为，获取网页中的各类图片素材。

2.4建立html文件和css文件。首先完成html文件中的DOM结构，与仿写对象进行对比，检查有无漏项，检查之前确定的区块实现方法可否优化。其次完成CSS文件，先把所有需要使用的选择器建立好，并在后面注释其选择的具体元素，再逐步完善选择器中的属性，边进行边调试。

3.布局分析

3.1计划仿写的页面去除页头和页脚之后与一个组件类似，首先用一个容器进行包裹（最外层红色粗框）。从页面中可以发现，其内部的四个绿框组件是纵向排列，而且各绿框中内容格式不完全类似。因此最外面的容器设置为Flex容器，容器内项目主轴为纵轴。

3.2最上方的绿框中，是购物车的信息统计项目，其下方有一条横割线，尤其注意其左边的三项，字体、颜色有变化，右边的价格和按钮也有颜色变化。因此该容器设置为Flex容器，左边项目设为无序列表，右边用div包裹，两端对齐。

3.3第二个绿框，类似于一个表格的表头（其实可以将第二个绿框和第三个绿框合并为一个），可以用table或者grid实现。

3.4 第三个绿框从功能上来说是商品的清单信息，共有三项，每项格式基本相同，本文选择用Grid布局。

3.5最下方的绿框和最上方的绿框布局相似，方法一样。

4.实现代码

4.1html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="shop_shopingcart.css">
  7.     <link rel="stylesheet" href="../../static/font/iconfont.css">
  8. </head>
  9. <body>
  10.     <!--引入公共头部组件-->
  11.     <div class="public-header">
  12.     <a href="">网站首页</a>
  13.     <a href="">专题</a>
  14.     <a href="">网站导航</a>
  15.     <a href="">二手商品</a>
  16.     <a href="">讨论区</a>
  17.     <span>
  18.                 <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  19.                 <a href="">免费注册</a>
  20.             </span>
  21. </div>
  22.     <!--仿写的淘宝购物车页面主体部分-->
  23.     <div class="shop-shopingcart">
  24.         <!--信息统计-->
  25.         <div class="title">
  26.             <ul>
  27.                 <li>
  28.                     <a href="">
  29.                         <span>全部商品</span>
  30.                         <span>4</span>
  31.                     </a>
  32.                 </li>
  33.                 <li>
  34.                     <a href="">
  35.                         <span>降价商品</span>
  36.                         <span>0</span>
  37.                     </a>
  38.                 </li>
  39.                 <li>
  40.                     <a href="">
  41.                         <span>库存紧张</span>
  42.                         <span>0</span>
  43.                     </a>
  44.                 </li>
  45.             </ul>
  46.             <div>
  47.                 <span>已选商品（不含运费）</span>
  48.                 <span>¥283.80</span>
  49.                 <button>结算</button>
  50.             </div>
  51.         </div>
  52.         <!--商品清单表头-->
  53.         <div class="thead">
  54.                 <!--复选框及全选标签-->
  56.             <input type="checkbox" name="all" id="alltop" >
  57.             <label for="alltop">全选</label>
  58.             <span>商品信息</span>
  59.             <span>单位</span>
  60.             <span>数量</span>
  61.             <span>金额</span>
  62.             <span>操作</span>
  63.         </div>
  64.         <!--购物车清单主体-->
  65.         <div class="cartinfo">
  66.             <!--单个店铺区-->
  67.             <div class="goodsinfo">
  68.                 <!--店铺名称区-->
  69.                 <div class="shop">
  70.                     <input type="checkbox" name="shopname"  id="shopname" value="百瑞源旗舰店" checked>
  71.                     <img src="../../static/images/shopingcart/tianmao.jpg" alt=""><!--天猫图标 -->
  72.                     <span>店铺:</span>
  73.                     <a href="">百瑞源旗舰店</a>
  74.                     <img src="../../static/images/shopingcart/wangwang.jpg" alt=""><!--旺旺图标 -->
  75.                 </div>
  76.                 <!--商品信息区-->
  77.                 <div class="goods">
  78.                     <input type="checkbox" name="price" id="price" value="255.8" checked><!--商品复选框-->
  79.                     <!--商品图片 -->
  80.                     <a href="">
  81.                         <img src="../../static/images/shopingcart/gouqi.jpg" alt="">
  82.                     </a>
  83.                     <!--商品具体信息及下方信用图标-->
  84.                     <div>
  85.                         <a>百瑞源-顶天红枸杞子宁夏正宗特级优枸杞干免洗中宁枸杞泡茶男肾</a>
  86.                         <!--商品资质图片-->
  87.                         <div class="img">
  88.                             <img src="../../static/images/shopingcart/xcard.png" alt=""><!-- 信用-->
  89.                             <a href=""><img src="../../static/images/shopingcart/qitian.png" alt=""></a><!-- 七天-->
  90.                             <a href=""><img src="../../static/images/shopingcart/baozhang.png" alt=""></a><!-- 保障-->
  91.                         </div>
  92.                     </div>
  93.                     <!--单价-->
  94.                     <span>¥127.90</span>
  95.                     <!--数量输入框-->
  96.                     <input type="number" value="2" step="1">
  97.                     <!--总价-->
  98.                     <span>¥255.80</span>
  99.                     <!--删除 -->
  100.                     <a>删除</a>
  101.                 </div>
  102.             </div>
  103.             <div class="goodsinfo">
  104.                 <!--店铺名称区-->
  105.                 <div class="shop">
  106.                     <input type="checkbox" name="shopname"  id="shopname" value="小熊慕熙专卖店">
  107.                     <img src="../../static/images/shopingcart/tianmao.jpg" alt=""><!--天猫图标 -->
  108.                     <span>店铺:</span>
  109.                     <a href="">小熊慕熙专卖店</a>
  110.                     <img src="../../static/images/shopingcart/wangwang.jpg" alt=""><!--旺旺图标 -->
  111.                 </div>
  112.                 <!--商品信息区-->
  113.                 <div class="goods">
  114.                     <input type="checkbox" name="price" id="price" value="127.9" ><!--商品复选框-->
  115.                     <!--商品图片 -->
  116.                     <a href="">
  117.                         <img src="../../static/images/shopingcart/guo.jpg" alt="">
  118.                     </a>
  119.                     <!--商品具体信息及下方信用图标-->
  120.                     <div>
  121.                         <a>小熊电煮锅多功能宿舍神器学生锅家用迷你小电锅炒炖蒸煮面一体锅</a>
  122.                         <!--商品资质图片-->
  123.                         <div class="img">
  124.                             <img src="../../static/images/shopingcart/xcard.png" alt=""><!-- 信用-->
  125.                             <a href=""><img src="../../static/images/shopingcart/qitian.png" alt=""></a><!-- 七天-->
  126.                             <a href=""><img src="../../static/images/shopingcart/baozhang.png" alt=""></a><!-- 保障-->
  127.                         </div>
  128.                     </div>
  129.                     <!--单价-->
  130.                     <span>¥127.90</span>
  131.                     <!--数量输入框-->
  132.                     <input type="number" value="1" step="1">
  133.                     <!--总价-->
  134.                     <span>¥127.90</span>
  135.                     <!--删除 -->
  136.                     <a>删除</a>
  137.                 </div>
  138.             </div>
  139.             <div class="goodsinfo">
  140.                 <!--店铺名称区-->
  141.                 <div class="shop">
  142.                     <input type="checkbox" name="shopname"  id="shopname" value="maling梅林旗舰店" checked>
  143.                     <img src="../../static/images/shopingcart/tianmao.jpg" alt=""><!--天猫图标 -->
  144.                     <span>店铺:</span>
  145.                     <a href="">maling梅林旗舰店</a>
  146.                     <img src="../../static/images/shopingcart/wangwang.jpg" alt=""><!--旺旺图标 -->
  147.                 </div>
  148.                 <!--商品信息区-->
  149.                 <div class="goods">
  150.                     <input type="checkbox" name="price" id="price" value="13.9" checked ><!--商品复选框-->
  151.                     <!--商品图片 -->
  152.                     <a href="">
  153.                         <img src="../../static/images/shopingcart/guantou1.jpg" alt="">
  154.                     </a>
  155.                     <!--商品具体信息及下方信用图标-->
  156.                     <div>
  157.                         <a>梅林糖水荔枝罐头650g 果肉饱满夏季休闲水果沙拉饮料蛋糕甜点</a>
  158.                         <!--商品资质图片-->
  159.                         <div class="img">
  160.                             <img src="../../static/images/shopingcart/xcard.png" alt=""><!-- 信用-->
  161.                             <a href=""><img src="../../static/images/shopingcart/qitian.png" alt=""></a><!-- 七天-->
  162.                             <a href=""><img src="../../static/images/shopingcart/baozhang.png" alt=""></a><!-- 保障-->
  163.                         </div>
  164.                     </div>
  165.                     <!--单价-->
  166.                     <span>¥13.90</span>
  167.                     <!--数量输入框-->
  168.                     <input type="number" value="1" step="1">
  169.                     <!--总价-->
  170.                     <span>¥13.90</span>
  171.                     <!--删除 -->
  172.                     <a>删除</a>
  173.                 </div>
  174.                 <div class="goods">
  175.                     <input type="checkbox" name="price" id="price" value="13.9" checked ><!--商品复选框-->
  176.                     <!--商品图片 -->
  177.                     <a href="">
  178.                         <img src="../../static/images/shopingcart/guantou2.jpg" alt="">
  179.                     </a>
  180.                     <!--商品具体信息及下方信用图标-->
  181.                     <div>
  182.                         <a>上海梅林糖水黄桃水果罐头650g新鲜水果沙拉蛋糕甜点烘焙食品材料</a>
  183.                         <!--商品资质图片-->
  184.                         <div class="img">
  185.                             <img src="../../static/images/shopingcart/xcard.png" alt=""><!-- 信用-->
  186.                             <a href=""><img src="../../static/images/shopingcart/qitian.png" alt=""></a><!-- 七天-->
  187.                             <a href=""><img src="../../static/images/shopingcart/baozhang.png" alt=""></a><!-- 保障-->
  188.                         </div>
  189.                     </div>
  190.                     <!--单价-->
  191.                     <span>¥13.90</span>
  192.                     <!--数量输入框-->
  193.                     <input type="number" value="1" step="1">
  194.                     <!--总价-->
  195.                     <span>¥13.90</span>
  196.                     <!--删除 -->
  197.                     <a>删除</a>
  198.                 </div>
  199.             </div>
  200.         </div>
  201.         <!--购物车清单底部-->
  202.         <div class="cartfooter">
  203.             <!--底部前段商品选择区-->
  204.             <ul>
  205.                 <li>
  206.                     <input type="checkbox" name="all" id="allbottom">
  207.                 </li>
  208.                 <li><label for="allbottom">全选</label></li>
  209.                 <li><a href="">删除</a></li>
  210.                 <li><a href="">移入收藏夹</a></li>
  211.                 <li><a href="">分享</a></li>
  212.             </ul>
  213.             <!--底部后端结算信息-->
  214.             <ul>
  215.                 <li>
  216.                     <a href="">已选商品<span>3</span>件</a>
  217.                 </li>
  218.                 <li>合计（不含运费）：</li>
  219.                 <li>¥283.60</li>
  220.             </ul>
  221.             <button>结算</button>
  222.         </div>
  223.     </div>
  224.     <!--引入公共页脚组件-->
  225.     <div class="public-footer">
  226.         <ul>
  227.             <li><a href="">简介</a></li>
  228.             <li><a href="">联系我们</a></li>
  229.             <li><a href="">招聘信息</a></li>
  230.             <li><a href="">友情链接</a></li>
  231.             <li><a href="">用户服务协议</a></li>
  232.             <li><a href="">隐私权声明</a></li>
  233.             <li><a href="">法律投诉声明</a></li>
  234.         </ul>
  235.         <span>LOGO</span>
  236.         <div>
  237.             <p>2019 fengniao.com. All rights reserved.安徽闹着玩有限公司（无聊网）版权所有</p>
  238.             <p>皖ICP证15110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  239.             <p>违法和不良信息举报电话：0551-1234567 举报邮箱：admin@baidu.com</p>
  240.         </div>
  241.         <div>
  242.             <span>关注公众号</span>
  243.             <img src="../../static/images/erwei-code.png" alt="">
  244.         </div>
  245.     </div>
  246. </body>
  247. </html>

4.2CSS部分

header

  1. @import "../reset.css";
  3. .public-header {
  4.     width: 100%;
  5.     height: 44px;
  6.     padding: 0 20px;
  7.     box-sizing: border-box;
  8.     background-color: black;
  9.     display: flex;
  10.     flex-direction: row;
  11.     flex-wrap: nowrap;
  12.     align-items: center;
  13. }
  15. .public-header  a {
  16.     color: white;
  17.     padding: 0 10px;
  18.     line-height: 44px;
  19.     font-size: 13px;
  20. }
  22. .public-header > a:hover {
  23.     background-color: white;
  24.     color: black;
  25. }
  27. .public-header span {
  28.     margin-left: auto;
  29. }
  31. .public-header i {
  32.     margin-right: 10px;
  33.     font-size: 13px;
  34. }

main(shop-shopingcart)

  1. @import "../../public/reset.css";
  2. @import "../../public/public_header/public_header.css";
  3. @import "../../public/public_footer/public_footer.css";
  5. body {
  6.     background-color: white;
  7. }
  8. .shop-shopingcart {
  9.     width: 1200px;
  10.     margin: 20px auto;
  11.     display: flex;
  12.     flex-direction: column;
  13.     flex-wrap: nowrap;
  14. }
  15. /*标题区样式设置开始*/
  16. /*设置该区域整体样式：宽、高、加上底边、为弹性容器、主轴为纵轴、不换行*/
  17. .shop-shopingcart .title {
  18.     width: 1200px;
  19.     height: 33px;
  20.     border-bottom: 2px solid #e6e6e6 ;
  21.     display: flex;
  22.     flex-direction: row;
  23.     flex-wrap: nowrap;
  24. }
  25. /*设置标题区前半段商品信息统计区无序列表样式为弹性容器、横向排列、不换行*/
  26. .shop-shopingcart .title ul {
  27.     display: flex;
  28.     flex-direction: row;
  29.     flex-wrap: nowrap;
  30. }
  31. /*设置列表项的宽高*/
  32. .shop-shopingcart .title li {
  33.     /*width: 134px;*/
  34.     height: 33px;
  35.     font-size: 16px;
  36.     color: #3c3c3c;
  37.     text-align: center;
  38. }
  39. /*设置信息统计区第一个列表项：全部商品 样式*/
  40. .shop-shopingcart .title li:nth-of-type(1) a {
  41.     padding-left: 15px;
  42.     padding-right: 30px;
  43. }
  44. /*设置信息统计区第二个列表项：降价商品 样式，并设置左右边框*/
  45. .shop-shopingcart .title li:nth-of-type(2) a{
  46.     padding: 0 30px;
  47.     border-left: 1px solid gray;
  48.     border-right: 1px solid gray;
  49.     box-sizing: border-box;
  50. }
  51. /*设置信息统计区第三个列表项：库存紧张 的样式*/
  52. .shop-shopingcart .title li:nth-of-type(3) a{
  53.     padding: 0 30px;
  54. }
  55. /*设置信息统计区中所有的信息统计标题字体加粗*/
  56. .shop-shopingcart .title a  span:first-of-type{
  57.     font-weight: bolder;
  58. }
  59. /*设置信息统计区中所有信息统计数字字体为正常值*/
  60. .shop-shopingcart .title a span:last-of-type {
  61.      color: #f40;
  62.      margin-left: 5px;
  63.     font-weight: normal;
  64.  }
  65. /*设置信息统计区第一个区块字体为红色，下边有红色底边*/
  66. .shop-shopingcart .title li:nth-of-type(1) {
  67.     border-bottom: 2px solid #f40;
  68. }
  69. .shop-shopingcart .title li:nth-of-type(1) a{
  70.     color: #f40;
  71. }
  73. /*设置标题区后半段的结算区靠右*/
  74. .shop-shopingcart .title > div {
  75.     margin-left: auto;
  76.     height: 33px;
  77.     font-size: 12px;
  78. }
  79. /*设置结算价钱的颜色和样式*/
  80. .shop-shopingcart .title > div span:nth-of-type(2) {
  81.     color: #f40;
  82.     font-weight: 700;
  83. }
  84. /*设置结算按钮的样式*/
  85. .shop-shopingcart .title button {
  86.     width: 55px;
  87.     background-color: #f40;
  88.     color: white;
  89.     border-radius: 2px;
  90.     border: none;
  91.     font-size: 12px;
  92.     line-height: 25px;
  93. }
  94. /*标题区样式设置完毕*/
  96. /*商品清单表头样式设置开始*/
  97. .shop-shopingcart .thead {
  98.     display: grid;
  99.     grid-template-columns: 45px 90px 615px 120px 120px 105px 105px;
  100.     grid-template-rows: 50px;
  101.     /*grid-template-areas: 'check label info up num total op';*/
  102.     align-items: center;
  103. }
  104. .shop-shopingcart .thead input {
  105.      margin: 0 15px;
  106.  }
  107. .shop-shopingcart .thead label {
  108.     margin-left: -5px;
  109. }
  110. .shop-shopingcart .thead input:hover,.shop-shopingcart .thead label:hover{
  111.    cursor: pointer;
  112. }
  113. .shop-shopingcart .thead span:first-of-type{
  114.     padding-right: 315px;
  115.     box-sizing: border-box;
  116. }
  119. /*清单主体区样式设置*/
  120. .shop-shopingcart .cartinfo {
  121.     width: 1200px;
  122.     display: flex;
  123.     flex-direction: column;
  124.     flex-wrap: nowrap;
  125. }
  126. /*商品标签样式设置*/
  127. .shop-shopingcart .goodsinfo {
  128.     width: 1200px;
  129.     display: flex;
  130.     flex-direction: column;
  131.     flex-wrap: nowrap;
  132. }
  134. /*店铺名称样式设置*/
  135. .shop-shopingcart .shop {
  136.     height: 38px;
  137.     padding-left: 15px;
  138.     font-size: 12px;
  139.     line-height: 38px;
  140.     display: flex;
  142. }
  143. /*店铺复选框样式设置*/
  144. .shop-shopingcart .shop input {
  145.     display: inline-block;
  146.     width: 15px;
  147.     height: 15px;
  148.     align-self: center;
  149. }
  150. /*天猫图标样式*/
  151. .shop-shopingcart .shop img:first-of-type {
  152.     width: 16px;
  153.     height: 16px;
  154.     border-radius: 2px;
  155.     align-self: center;
  156.     margin-left: 10px;
  157.     margin-right: 10px;
  158. }
  159. /*旺旺图标样式*/
  160. .shop-shopingcart .shop img:last-of-type {
  161.     width: 20px;
  162.     height: 20px;
  163.     border-radius: 2px;
  164.     align-self: center;
  165. }
  166. /*店名链接样式*/
  167. .shop-shopingcart .shop a {
  168.     font-size: 12px;
  169.     line-height: 38px;
  170. }
  171. .shop-shopingcart .goodsinfo {
  172.     margin-bottom: 15px;
  173. }
  174. /*货物详细清单样式设置*/
  175. .shop-shopingcart .goods {
  176.     display: grid;
  177.     grid-template-columns: 45px 90px 615px 120px 120px 105px 105px;
  178.     grid-template-rows: 130px;
  179.     grid-template-areas: 'check pic info up num total op';
  180.     padding-top:15px;
  181.     box-sizing: border-box;
  182.     align-items: start;
  183.     border: 1px solid #aaa;
  184.     background-color: #fcfcfc;
  185. }
  186. /*货物详细清单复选框样式*/
  187. .shop-shopingcart .goods > input {
  188.     justify-self: end;
  189.     width: 15px;
  190.      height: 15px;
  191.  }
  192. .shop-shopingcart .goods > div{
  193.     height: 80px;
  194.     padding-right: 315px;
  195.     box-sizing: border-box;
  196.     display: flex;
  197. }
  198. /*设置货物详细清单中货物图片链接的样式*/
  199. .shop-shopingcart .goods > a:first-of-type {
  200.     margin-left: 5px;
  201. }
  202. /*设置货物详细清单中文字说明信息部分的样式*/
  203. .shop-shopingcart .goods > div {
  204.     display: flex;
  205.     flex-direction: column;
  206.     justify-content: space-between;
  207. }
  208. .shop-shopingcart .goods span:first-of-type {
  209.     color: #3c3c3c;
  210.     font-weight: 700;
  211. }
  212. .shop-shopingcart .goods span:last-of-type {
  213.     color: #f40;
  214.     font-weight: 700;
  215. }
  216. .shop-shopingcart .goods input:last-of-type {
  217.     width: 39px;
  218.     height: 15px;
  219.     justify-self: start;
  220. }
  221. /*设置被选中商品的背景色*/
  222. .shop-shopingcart .goodsinfo:nth-of-type(1) .goods {
  223.     background-color:#fff8e1;
  224. }
  225. .shop-shopingcart .goodsinfo:nth-of-type(3) .goods {
  226.     background-color:#fff8e1;
  227. }
  230. /*底部样式设置开始*/
  231. .shop-shopingcart .cartfooter {
  232.     width: 1200px;
  233.     height: 50px;
  234.     font-size: 8px;
  235.     background-color: #e5e5e5;
  236.     display: flex;
  237.     flex-direction: row;
  238.     flex-wrap: nowrap;
  239.     margin:20px 0;
  240.     justify-content: space-between;
  241. }
  242. .shop-shopingcart .cartfooter ul {
  243.     display: flex;
  244.     flex-direction: row;
  245.     flex-wrap: nowrap;
  246.     align-items: center;
  247.     /*justify-content: space-between;*/
  248. }
  249. .shop-shopingcart .cartfooter ul li {
  250.     font-size: 13px;
  251.     color: #404040;
  252. }
  253. .shop-shopingcart .cartfooter ul:first-of-type li:first-of-type {
  254.     padding-left: 5px;
  255. }
  256. .shop-shopingcart .cartfooter ul:first-of-type li:nth-of-type(2) {
  257.     margin-left: -22px;
  258. }
  259. .shop-shopingcart .cartfooter li {
  260.     margin-right:25px;
  261. }
  262. .shop-shopingcart .cartfooter ul:last-of-type a span {
  263.     color: #f40;
  264.     font-size: 18px;
  265.     font-weight: 700;
  266.     padding: 0 5px;
  267. }
  268. .shop-shopingcart .cartfooter ul:last-of-type {
  269.     margin-left: auto;
  270. }
  271. .shop-shopingcart .cartfooter ul:last-of-type li:nth-of-type(3) {
  272.     color: #f40;
  273.     font-size: 22px;
  274.     font-weight: 400;
  275.     padding: 0 5px;
  276. }
  277. .shop-shopingcart .cartfooter button {
  278.     width: 120px;
  279.     height: 50px;
  280.     background-color: #f40;
  281.     color: white;
  282.     border-radius: 3px;
  283.     border:none;
  284.     margin-right: 0;
  285. }

footer

  1. @import "../../public/reset.css";
  2. a {
  3.     color: #959ba2;
  4.     padding: 5px 15px;
  5. }
  6. .public-footer {
  7.     width: 100%;
  8.     height: 250px;
  9.     background-color: #282c31;
  10.     color: #959ba2;
  11.     padding: 30px;
  12.     box-sizing: border-box;
  13.     display: grid;
  14.     grid-template-columns:130px 550px 400px;
  15.     grid-template-rows: 30px 120px;
  16.     grid-template-areas:'link link pic' 'logo info pic';
  17.     justify-content: center;
  18. }
  20. .public-footer ul {
  21.     grid-area: link;
  22.     display: flex;
  23.     flex-flow: row nowrap;
  24.     height: 24px;
  25. }
  26. .public-footer span:first-of-type {
  27.     grid-area: logo;
  28.     font-size: 30px;
  29.     align-self: center;
  30. }
  31. .public-footer div:nth-of-type(1) {
  32.     grid-area: info;
  33. }
  34. .public-footer div:nth-of-type(1) p {
  35.    height: 40px;
  36.     line-height: 40px;
  37. }
  38. .public-footer > div:nth-of-type(2){
  39.     grid-area: pic;
  40.     padding-left: 40px;
  41.     box-sizing: border-box;
  42.     border-left: 2.5px solid #000000;
  43.     display: flex;
  44.     width: 400px;
  45.     flex-direction: column;
  46.     align-items: start;
  47. }
  48. .public-footer div:nth-of-type(2) span {
  49.     font-size: 13px;
  50.     width: 360px;
  51.     padding-left: 20px;
  52.     box-sizing: border-box;
  53. }
  54. .public-footer div:nth-of-type(2) img{
  55.     width: 110px;
  56.     height: 110px;
  57.     margin-top: 10px;
  58. }

5.整体效果图

6.小结

6.1作业完成过程中对整体把握不够，布局分析还不够细致深入，各类布局的属性要求还不够清楚，比如说中间的两个绿框是可以合并完成的，造成了代码冗余，耗费了大量的时间。

6.2页面分析中第一个绿框左边部分信息统计栏鼠标滑过后整体变色的效果还没有完全实现。

6.3复选框的大小不会调节，始终达不到15*15的目标网页效果。

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