Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月28日作业：二手商品交易组件（grid布局）
Blogger Information
Blog 145
fans 7
comment 7
visits 164556
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
12月28日作业：二手商品交易组件（grid布局）
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
966 people have browsed it

作业一：
二手商品交易组件代码：
1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <!--    <link rel="stylesheet" href="public_second_hand.css">-->
  6.     <link rel="stylesheet" href="public_second_hand(grid).css">
  7.     <title>公共商品区</title>
  8. </head>
  9. <body>
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  13. <div class="public-second-hand">
  14.     <div class="title">
  15.         <div class="title1">
  16.             <a href=""><span>抢好货</span></a>
  17.             <span>0低价，便捷，安全，快速</span>
  18.         </div>
  19.         <div class="title2">
  20.             <span>热门分类</span>
  21.             <a href=""><span>美女写真</span></a>
  22.             <a href=""><span>日本美女</span></a>
  23.             <a href=""><span>美国美女</span></a>
  24.             <a href=""><span>国内美女</span></a>
  25.             <a href=""><span>AV美女</span></a>
  26.         </div>
  27.     </div>
  28.     <div class="shops">
  29.         <div class="shop-left">
  30.             <div class="details">
  31.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  32.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  33.                 <div>
  34.                     <span>&yen;333</span>
  35.                     <span>美女</span>
  36.                 </div>
  37.             </div>
  38.             <div class="details">
  39.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  40.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  41.                 <div>
  42.                     <span>&yen;333</span>
  43.                     <span>美女</span>
  44.                 </div>
  45.             </div>
  46.             <div class="details">
  47.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  48.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  49.                 <div>
  50.                     <span>&yen;333</span>
  51.                     <span>美女</span>
  52.                 </div>
  53.             </div>
  54.             <div class="details">
  55.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  56.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  57.                 <div>
  58.                     <span>&yen;333</span>
  59.                     <span>美女</span>
  60.                 </div>
  61.             </div>
  62.             <div class="details">
  63.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  64.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  65.                 <div>
  66.                     <span>&yen;333</span>
  67.                     <span>美女</span>
  68.                 </div>
  69.             </div>
  70.             <div class="details">
  71.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  72.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  73.                 <div>
  74.                     <span>&yen;333</span>
  75.                     <span>美女</span>
  76.                 </div>
  77.             </div>
  78.             <div class="details">
  79.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  80.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  81.                 <div>
  82.                     <span>&yen;333</span>
  83.                     <span>美女</span>
  84.                 </div>
  85.             </div>
  86.             <div class="details">
  87.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  88.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  89.                 <div>
  90.                     <span>&yen;333</span>
  91.                     <span>美女</span>
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="shop-right">
  96.             <div class="up">
  97.                 <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  98.                 <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  99.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  100.                 <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  101.             </div>
  102.             <div class="down">
  103.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  104.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </div>
  109. </body>
  110. </html>

2、css代码（grid布局）：

  1. @import url(../../public_reset.css);
  2. @import url(../publice_headline/public_headline.css);
  3. /*主体设置*/
  4. .public-second-hand {
  5.     width: 1200px;
  6.     margin:auto;
  7.     background-color: #ffffff;
  8.     /*border:1px solid #404040;*/
  9. }
  10. .public-second-hand:hover {
  11.     box-shadow: 0 0 3px #404040;
  12. }
  13. /*标题设置*/
  14. .public-second-hand > .title  > .title1 {
  15.     border-bottom: 1px solid #CCCCCC;
  16.     padding: 10px;
  17.     box-sizing: content-box;
  18. }
  19. .public-second-hand > .title > .title1 > a > span {
  20.     font-size: 30px;
  21.     /*color:red;*/
  22. }
  23. .public-second-hand > .title > .title1 > span {
  24.     color:#ff0000;
  25.     margin-left:20px;
  27. }
  28. .public-second-hand > .title  > .title2 >span {
  29.     font-size: 20px;
  30.     color:#ff0000;
  31.     margin-left:10px;
  32. }
  33. .public-second-hand > .title  > .title2 > a {
  34.     margin-left:20px;
  35. }
  36. .public-second-hand > .title  > .title2 > a:hover {
  37.     color:#DD4A68;
  38. }
  39. /*商品样式*/
  40. .public-second-hand > .shops {
  41.     margin-top: 10px;
  42.     margin-left: 10px;
  43.     padding-bottom: 10px;
  44.     display:grid;
  45.     grid-template-columns:8fr 4fr;
  46.     grid-template-rows:1fr;
  47. }
  48. /*商品左侧*/
  49. .public-second-hand > .shops > .shop-left {
  50.     display:grid;
  51.     grid-template-columns:repeat(4,1fr);
  52.     grid-template-rows: repeat(2,1fr);
  53. }
  54. .public-second-hand > .shops > .shop-left img {
  55.     width: 176px;
  56.     height: 120px;
  57. }
  58. .public-second-hand > .shops > .shop-left > .details {
  59.     margin-top: 10px;
  60.     display: grid;
  61.     grid-auto-columns: 180px;
  62.     grid-template-rows: 130px 2fr 0.6fr;
  63. }
  64. .public-second-hand > .shops > .shop-left > .details > div {
  65.     display: flex;
  66.     justify-content: space-between;
  67. }
  68. .public-second-hand > .shops > .shop-left > .details > div > :first-child{
  69.     color: #ff0000;
  70. }
  71. .public-second-hand > .shops > .shop-left > .details > div > :last-child {
  72.     background-color: #55a532;
  73.     border-radius: 5px;
  75.     color:#EFEFEF;
  76. }
  77. /*商品右侧*/
  79. .public-second-hand > .shops > .shop-right {
  80.     margin-top: 10px;
  81.     display: grid;
  82.     grid-auto-columns: 1fr;
  83.     grid-template-rows: 1.9fr 1fr;
  84. }
  85. .public-second-hand > .shops > .shop-right > .up {
  86.     display: grid;
  87.     grid-template-columns: repeat(2,1fr);
  88.     grid-template-rows: repeat(2,1fr);
  89. }
  90. .public-second-hand > .shops > .shop-right > .down {
  91.     display: grid;
  92.     grid-template-rows: repeat(2,1fr);
  93. }

3、效果图：在火狐浏览器中打开，并调出grid网格线的效果

作业二：
1、display:grid;
2、网格规划：gird-template-columns/rows:
属性值的形式：像素设置px 比例设置fr 函数设置repeat(2,1fr);/minmax(100px,200px)等等
例如：grid-template-columns:120px repeat(2,1fr);
3、网格间隙设置：grid-row/column-gap:
属性值：px；
简写：grid-gap:row column； /gap 属性值单位px;
4、网格选择：grid-row/column-start/end:
属性值：为网格lines,
简写：grid-row/column: 1/3；或者位移 grid-row/column:1/ span 2;

手写代码：

总结：
1、grid个别属性简写不熟练，特别是规划网格线时，不敢使用简写
：利用fr比例使用单元格自动调整网格项目
2、grid网格规划问题，整体规划，还是利用嵌套拆分规划
3、单元格的选择感觉麻烦（应该时还没有学单元格命名的原因把）
4、grid网格域的使用问题：不熟练
5、网格单元对其，和单元格或者网格域内容对其问题

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