简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 28日作业+Grid实战之二手信息页面+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17287
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
28日作业+Grid实战之二手信息页面+10期线上班
江川林
Original
639 people have browsed it

Grid网格布局的实战运用

从小白到经过这几天的学习，发现编程是一个很有趣的事，把自己所想的页面，一个一个的敲出来，尽管会遇到很多的问题，很多很久都跳不出的坑，就像这次Grid实战运用

因为没有老师带着敲，导致自己根本没有头绪，不知道如何去布置，如何真正的将学到的只是运用到实战上面来，后面还是看了同学的源码借鉴了下，才将本次的作业完成。

以下是效果图：

以下是HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手交易grid布局</title>
  6.     <link rel="stylesheet" href="second-hand.css">
  7. </head>
  8. <body>
  9. <!--        标头，标题，分类，图片，广告-->
  10.         <span>二手交易</span>
  11.         <div class="second-hand">
  12.                     <div class="option">
  13.                             <a href="">抢好货</a>
  14.                             <span>0低价，便捷，安全，快速</span>
  15.                     </div>
  16.                     <div class="class">
  17.                             <span>热门分类</span>
  18.                             <a href="">美女写真</a>
  19.                             <a href="">日本美女</a>
  20.                             <a href="">美女图片</a>
  21.                             <a href="">美女写真</a>
  22.                             <a href="">美女写真</a>
  23.                             <a href="">美女写真</a>
  24.                     </div>
  25.                      <div class="picture-ads">
  26.                             <div class="picture">
  27.                                     <div class="a">
  28.                                             <a href="">
  29.                                                     <img src="1225/static/images/1.jpg" alt="">
  30.                                             </a>
  31.                                             <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  32.                                             <div class="money">
  33.                                                     <span>￥333</span>
  34.                                                     <span>美女</span>
  35.                                             </div>
  36.                                     </div>
  37.                                     <div class="b">
  38.                                     <a href="">
  39.                                         <img src="1225/static/images/1.jpg" alt="">
  40.                                     </a>
  41.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  42.                                     <div class="money">
  43.                                         <span>￥333</span>
  44.                                         <span>美女</span>
  45.                                     </div>
  46.                                 </div>
  47.                                     <div class="c">
  48.                                     <a href="">
  49.                                         <img src="1225/static/images/1.jpg" alt="">
  50.                                     </a>
  51.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  52.                                     <div class="money">
  53.                                         <span>￥333</span>
  54.                                         <span>美女</span>
  55.                                     </div>
  56.                                 </div>
  57.                                     <div class="d">
  58.                                     <a href="">
  59.                                         <img src="1225/static/images/1.jpg" alt="">
  60.                                     </a>
  61.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  62.                                     <div class="money">
  63.                                         <span>￥333</span>
  64.                                         <span>美女</span>
  65.                                     </div>
  66.                                 </div>
  67.                                     <div class="e">
  68.                                     <a href="">
  69.                                         <img src="1225/static/images/1.jpg" alt="">
  70.                                     </a>
  71.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  72.                                     <div class="money">
  73.                                         <span>￥333</span>
  74.                                         <span>美女</span>
  75.                                     </div>
  76.                                 </div>
  77.                                     <div class="f">
  78.                                     <a href="">
  79.                                         <img src="1225/static/images/1.jpg" alt="">
  80.                                     </a>
  81.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  82.                                     <div class="money">
  83.                                         <span>￥333</span>
  84.                                         <span>美女</span>
  85.                                     </div>
  86.                                 </div>
  87.                                     <div class="g">
  88.                                     <a href="">
  89.                                         <img src="1225/static/images/1.jpg" alt="">
  90.                                     </a>
  91.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  92.                                     <div class="money">
  93.                                         <span>￥333</span>
  94.                                         <span>美女</span>
  95.                                     </div>
  96.                                 </div>
  97.                                     <div class="h">
  98.                                     <a href="">
  99.                                         <img src="1225/static/images/1.jpg" alt="">
  100.                                     </a>
  101.                                     <a href="">美女妹妹美女妹妹美女妹妹美女妹妹</a>
  102.                                     <div class="money">
  103.                                         <span>￥333</span>
  104.                                         <span>美女</span>
  105.                                     </div>
  106.                                 </div>
  107.                             </div>
  108.                             <div class="ads">
  109.                                 <a href="" class="q"><img src="1225/static/images/ad/1.png" alt=""></a>
  110.                                 <a href="" class="w"><img src="1225/static/images/ad/2.png" alt=""></a>
  111.                                 <a href="" class="u"><img src="1225/static/images/ad/3.png" alt=""></a>
  112.                                 <a href="" class="r"><img src="1225/static/images/ad/4.png" alt=""></a>
  113.                                 <a href="" class="t"><img src="1225/static/images/ad/ad2.jpg" alt=""></a>
  114.                                 <a href="" class="y"><img src="1225/static/images/ad/image.png" alt=""></a>
  115.                             </div>
  116.                      </div>
  117.         </div>
  118. </body>
  119. </html>

以下是CSS：

  1. * {
  2.         padding: 0;
  3.         margin: 0;
  4.         /*outline: 1px dashed red;*/
  5. }
  7. a {
  8.         text-decoration: none;
  9.         color: #555555;
  10. }
  11. body {
  12.     display: flex;
  13.     flex-flow: column nowrap;
  14.     color: #555555;
  15.     background-color: #eeffee;
  16. }
  18. body > span {
  19.         font-size: 35px;
  20.         margin: 20px auto;
  21.         border-bottom: 3px solid red;
  22.         box-sizing: border-box;
  23. }
  25. .second-hand {
  26.         width: 1200px;
  27.         margin: auto;
  28.         background-color: #ffffff;
  29. }
  30. .second-hand:hover {
  31.     box-shadow: 0 0 8px #888;
  32. }
  34. .second-hand  > .picture-ads > .picture  img {
  35.     width: 176px;
  36.     height: 120px;
  37.     /*display: block;*/
  38. }
  40. /*标题格式*/
  41. .second-hand > .option {
  42.         padding: 10px 10px 20px;
  43.         border-bottom: 1px solid #555555;
  44. }
  45. .second-hand > .option > a {
  46.     font-size: 20px;
  47.     color: black;
  48. }
  49. .second-hand > .option > span {
  50.     margin-left: 5px;
  51.     color: red;
  52. }
  53. .second-hand > .class {
  54.     padding: 10px;
  55. }
  56. .second-hand > .class > span {
  57.     color: red;
  58.     font-size: 25px;
  59. }
  60. .second-hand > .class > a {
  61.     margin-left: 5px;
  62.     color: black;
  63. }
  64. .second-hand > .class > a:hover {
  65.     color: red;
  66. }
  68. .second-hand > .picture-ads{
  69.         display: grid;
  70.         grid-template-columns: 8fr 4fr;
  71. }
  72. .second-hand > .picture-ads > .picture {
  73.     display: grid;
  74.     grid-template-columns: repeat(4,4fr);
  75.     grid-template-rows: repeat(2,2fr);
  76.     /*grid-gap: 10px;*/
  77. }
  78. .second-hand > .picture-ads > .picture > div > .money {
  79.     display: flex;
  80.     justify-content: space-between;
  81. }
  82. .second-hand > .picture-ads > .picture > div > .money >span:first-of-type{
  83.     color: red;
  84. }
  85. .second-hand > .picture-ads > .picture > div > .money >span:last-of-type {
  86.     background-color: lawngreen;
  87.     border-radius: 5px;
  88. }
  90. /*将元素放进网格中*/
  93. .second-hand  > .picture-ads > .picture > div {
  94.     margin-top: 10px;
  95.     display: grid;
  96.     grid-auto-columns: 180px;
  97.     grid-template-rows: 130px 2fr 0.6fr;
  98. }
  101. .second-hand  > .picture-ads > .ads {
  102.     padding: 5px;
  103.     box-sizing: border-box;
  104.     display: grid;
  105.     grid-template-areas:
  106.             'q w'
  107.             'u r'
  108.             't t'
  109.             'y y'
  110. ;
  111.     /*grid-gap: 5px;*/
  112. }
  114. .second-hand  > .picture-ads > .ads > .q {
  115.         width: 100%;
  116.         grid-area: q;
  117. }
  118. .second-hand  > .picture-ads > .ads > .w {
  119.     width: 100%;
  120.     grid-area: w;
  121. }
  122. .second-hand  > .picture-ads > .ads > .u{
  123.     width: 100%;
  124.     grid-area: u;
  125. }
  126. .second-hand  > .picture-ads > .ads > .r{
  127.     width: 100%;
  128.     grid-area: r;
  129. }
  130. .second-hand  > .picture-ads > .ads > .t {
  131.     width: 100%;
  132.     grid-area: t;
  133. }
  134. .second-hand  > .picture-ads > .ads > .y {
  135.     width: 100%;
  136.     grid-area: y;
  137. }
  139. /**/
  • {
    1.   padding: 0;
    2.   margin: 0;
    3.   /*outline: 1px dashed red;*/
    }

a {
text-decoration: none;
color: #555555;
}
body {
display: flex;
flex-flow: column nowrap;
color: #555555;
background-color: #eeffee;
}

body > span {
font-size: 35px;
margin: 20px auto;
border-bottom: 3px solid red;
box-sizing: border-box;
}

.second-hand {
width: 1200px;
margin: auto;
background-color: #ffffff;
}
.second-hand:hover {
box-shadow: 0 0 8px #888;
}

.second-hand > .picture-ads > .picture img {
width: 176px;
height: 120px;
/display: block;/
}

/标题格式/
.second-hand > .option {
padding: 10px 10px 20px;
border-bottom: 1px solid #555555;
}
.second-hand > .option > a {
font-size: 20px;
color: black;
}
.second-hand > .option > span {
margin-left: 5px;
color: red;
}
.second-hand > .class {
padding: 10px;
}
.second-hand > .class > span {
color: red;
font-size: 25px;
}
.second-hand > .class > a {
margin-left: 5px;
color: black;
}
.second-hand > .class > a:hover {
color: red;
}

.second-hand > .picture-ads{
display: grid;
grid-template-columns: 8fr 4fr;
}
.second-hand > .picture-ads > .picture {
display: grid;
grid-template-columns: repeat(4,4fr);
grid-template-rows: repeat(2,2fr);
/grid-gap: 10px;/
}
.second-hand > .picture-ads > .picture > div > .money {
display: flex;
justify-content: space-between;
}
.second-hand > .picture-ads > .picture > div > .money >span:first-of-type{
color: red;
}
.second-hand > .picture-ads > .picture > div > .money >span:last-of-type {
background-color: lawngreen;
border-radius: 5px;
}

/将元素放进网格中/

.second-hand > .picture-ads > .picture > div {
margin-top: 10px;
display: grid;
grid-auto-columns: 180px;
grid-template-rows: 130px 2fr 0.6fr;
}

.second-hand > .picture-ads > .ads {
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-areas:
‘q w’
‘u r’
‘t t’
‘y y’
;
/grid-gap: 5px;/
}

.second-hand > .picture-ads > .ads > .q {
width: 100%;
grid-area: q;
}
.second-hand > .picture-ads > .ads > .w {
width: 100%;
grid-area: w;
}
.second-hand > .picture-ads > .ads > .u{
width: 100%;
grid-area: u;
}
.second-hand > .picture-ads > .ads > .r{
width: 100%;
grid-area: r;
}
.second-hand > .picture-ads > .ads > .t {
width: 100%;
grid-area: t;
}
.second-hand > .picture-ads > .ads > .y {
width: 100%;
grid-area: y;
}

/*/ {
padding: 0;
margin: 0;
/outline: 1px dashed red;/
}

a {
text-decoration: none;
color: #555555;
}
body {
display: flex;
flex-flow: column nowrap;
color: #555555;
background-color: #eeffee;
}

body > span {
font-size: 35px;
margin: 20px auto;
border-bottom: 3px solid red;
box-sizing: border-box;
}

.second-hand {
width: 1200px;
margin: auto;
background-color: #ffffff;
}
.second-hand:hover {
box-shadow: 0 0 8px #888;
}

.second-hand > .picture-ads > .picture img {
width: 176px;
height: 120px;
/display: block;/
}

/标题格式/
.second-hand > .option {
padding: 10px 10px 20px;
border-bottom: 1px solid #555555;
}
.second-hand > .option > a {
font-size: 20px;
color: black;
}
.second-hand > .option > span {
margin-left: 5px;
color: red;
}
.second-hand > .class {
padding: 10px;
}
.second-hand > .class > span {
color: red;
font-size: 25px;
}
.second-hand > .class > a {
margin-left: 5px;
color: black;
}
.second-hand > .class > a:hover {
color: red;
}

.second-hand > .picture-ads{
display: grid;
grid-template-columns: 8fr 4fr;
}
.second-hand > .picture-ads > .picture {
display: grid;
grid-template-columns: repeat(4,4fr);
grid-template-rows: repeat(2,2fr);
/grid-gap: 10px;/
}
.second-hand > .picture-ads > .picture > div > .money {
display: flex;
justify-content: space-between;
}
.second-hand > .picture-ads > .picture > div > .money >span:first-of-type{
color: red;
}
.second-hand > .picture-ads > .picture > div > .money >span:last-of-type {
background-color: lawngreen;
border-radius: 5px;
}

/将元素放进网格中/

.second-hand > .picture-ads > .picture > div {
margin-top: 10px;
display: grid;
grid-auto-columns: 180px;
grid-template-rows: 130px 2fr 0.6fr;
}

.second-hand > .picture-ads > .ads {
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-areas:
‘q w’
‘u r’
‘t t’
‘y y’
;
/grid-gap: 5px;/
}

.second-hand > .picture-ads > .ads > .q {
width: 100%;
grid-area: q;
}
.second-hand > .picture-ads > .ads > .w {
width: 100%;
grid-area: w;
}
.second-hand > .picture-ads > .ads > .u{
width: 100%;
grid-area: u;
}
.second-hand > .picture-ads > .ads > .r{
width: 100%;
grid-area: r;
}
.second-hand > .picture-ads > .ads > .t {
width: 100%;
grid-area: t;
}
.second-hand > .picture-ads > .ads > .y {
width: 100%;
grid-area: y;
}

/**/

基础知识一定要记牢，基础知识一定要记牢，基础知识一定要记牢
一定要多看多练，一定要多看多练，一定要多看多练
相信自己一定能将PHP学好

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！