简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >28日作业+Grid实战之二手信息页面+10期线上班

28日作业+Grid实战之二手信息页面+10期线上班

江川林
江川林原创
2020年01月06日 15:05:00629浏览

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学好

上一条：1230作业+grid实战项目+10期线上班下一条：关于nginx file not found错误解决；
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多