Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1229作业之grid布局完成二手交易
Blogger Information
Blog 30
fans 0
comment 1
visits 22025
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
1229作业之grid布局完成二手交易
Admin
Original
456 people have browsed it

先上一手图

我并没有全局grid布局！毕竟grid布局个人认位不适合做细节布局！大部分地方都是用flex布局搞定的！主要是grid布局我也没玩明白，研究了一整天啦~~朱老师别打我啊!!!!!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" type="text/css" href="../public-reset.css">
  7.     <link rel="stylesheet" type="text/css" href="public_second_hand_grid.css">
  8. </head>
  9. <body>
  10.     <div class="public-second-hand">
  11.         <div class="title1">
  12.             <a href="#">抢好货</a>
  13.             <span>0低价,便捷,安全,快速</span>
  14.         </div>
  15.         <div class="title2">
  16.             <span>热门分类</span>
  17.             <a href="#">美女写真</a>
  18.             <a href="#">日本美女</a>
  19.             <a href="#">美国美女</a>
  20.             <a href="#">国内美女</a>
  21.             <a href="#">Av美女</a>
  22.         </div>
  23.         <div class="goods">
  24.             <div class="goods-list">
  25.                 <div class="intro">
  26.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  27.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  28.                     <div>
  29.                         <span>&yen;333</span>
  30.                         <span>美女</span>
  31.                     </div>
  32.                 </div>
  33.                 <div class="intro">
  34.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  35.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  36.                     <div>
  37.                         <span>&yen;333</span>
  38.                         <span>美女</span>
  39.                     </div>
  40.                 </div>
  41.                 <div class="intro">
  42.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  43.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  44.                     <div>
  45.                         <span>&yen;333</span>
  46.                         <span>美女</span>
  47.                     </div>
  48.                 </div>
  49.                 <div class="intro">
  50.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  51.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  52.                     <div>
  53.                         <span>&yen;333</span>
  54.                         <span>美女</span>
  55.                     </div>
  56.                 </div>
  57.                 <div class="intro">
  58.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  59.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  60.                     <div>
  61.                         <span>&yen;333</span>
  62.                         <span>美女</span>
  63.                     </div>
  64.                 </div>
  65.                 <div class="intro">
  66.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  67.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  68.                     <div>
  69.                         <span>&yen;333</span>
  70.                         <span>美女</span>
  71.                     </div>
  72.                 </div>
  73.                 <div class="intro">
  74.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  75.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  76.                     <div>
  77.                         <span>&yen;333</span>
  78.                         <span>美女</span>
  79.                     </div>
  80.                 </div>
  81.                 <div class="intro">
  82.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  83.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  84.                     <div>
  85.                         <span>&yen;333</span>
  86.                         <span>美女</span>
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.             <div class="quick-entry">
  91.                 <a href="#"><img src="../../static/images/ad/1.png" alt=""></a>
  92.                 <a href="#"><img src="../../static/images/ad/2.png" alt=""></a>
  93.                 <a href="#"><img src="../../static/images/ad/3.png" alt=""></a>
  94.                 <a href="#"><img src="../../static/images/ad/4.png" alt=""></a>
  95.                 <a href="#"><img src="../../static/images/ad/image.png" alt=""></a>
  96.                 <a href="#"><img src="../../static/images/ad/ad2.jpg" alt=""></a>
  97.             </div>
  98.         </div>
  99.     </div>
  100. </body>
  101. </html>
  1. .public-second-hand{
  2.     width: 1200px;
  3.     padding: 10px;
  4.     box-sizing: border-box;
  5.     border-radius: 5px;
  6.     margin: auto;
  7. }
  8. .public-second-hand:hover{
  9.     box-shadow: 0 0 8px #888888;
  10. }
  11. /*开始安排第一个标题*/
  12. .public-second-hand > .title1{
  13.     height: 46px;
  14.     border-bottom: 1px solid gray;
  15.     box-sizing: border-box;
  16. }
  17. .public-second-hand > .title1 > a{
  18.     font:28px/1 '微软雅黑';
  19.     font-weight: bold;
  20.     padding-right: 20px;
  21.     color: #888888;
  22. }
  23. .public-second-hand > .title1 > span{
  24.     font:16px/1 '微软雅黑';
  25.     color: red;
  26. }
  27. .public-second-hand > .title2{
  28.     height: 46px;
  29.     border-bottom: 1px solid #efefef;
  30.     box-sizing: border-box;
  31. }
  32. .public-second-hand > .title2 > span{
  33.     font:30px/46px '微软雅黑';
  34.     padding-right: 20px;
  35.     color: red;
  36. }
  37. .public-second-hand > .title2 > a{
  38.     font:16px/46px '微软雅黑';
  39. }
  40. .public-second-hand > .goods{
  41.     height: 440px;
  42.     display: flex;
  43. }
  44. .public-second-hand > .goods > .goods-list{
  45.     flex-basis: 800px;
  46.     padding: 10px;
  47.     box-sizing: border-box;
  48.     display: grid;
  49.     grid-template-columns: repeat(4,1fr);
  50.     grid-template-rows:repeat(2,1fr);    
  51.     /*分割线 第一个值是row 第二个是colmun*/
  52.     grid-gap: 15px 10px;
  53.     grid-template-areas:"meinv1 meinv2 meinv3 meinv4"
  54.                         "meinv5 meinv6 meinv7 meinv8";
  55. }
  56. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  57.     grid-area: meinv1;
  58. }
  59. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  60.     grid-area: meinv2;
  61. }
  62. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  63.     grid-area: meinv3;
  64. }
  65. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  66.     grid-area: meinv4;
  67. }
  68. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  69.     grid-area: meinv5;
  70. }
  71. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  72.     grid-area: meinv6;
  73. }
  74. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  75.     grid-area: meinv7;
  76. }
  77. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  78.     grid-area: meinv8;
  79. }
  80. .public-second-hand > .goods > .goods-list > .intro{
  81.     display: flex;
  82.     flex-flow:column nowrap;
  83.     justify-content:space-between;    
  84. }
  85. .public-second-hand > .goods > .goods-list >.intro > div{
  86.     display: flex;
  87. }
  88. .public-second-hand > .goods > .goods-list > .intro > div span:first-child{
  89.     color: red;
  90. }
  91. .public-second-hand > .goods > .goods-list > .intro > div span:last-child{
  92.     color: white;
  93.     padding:0 5px;
  94.     background: rgba(85, 206, 159);
  95.     /*让标签右边的方法一*/
  96.     /*方法2再60行处使用justify-content*/
  97.     margin-left: auto;
  98. }
  99. .public-second-hand > .goods > .quick-entry{
  100.     flex-basis: 400px;
  101.     padding: 10px;
  102.     box-sizing: border-box;
  103.     display: grid;
  104.     grid-template-columns: repeat(2,1fr); 
  105.     grid-template-rows:repeat(4,1fr);
  106.     column-gap:5px;
  107.     row-gap:5px;
  108.     grid-template-areas: "sige1 sige2"
  109.                          "sige3 sige4"
  110.                          "yitiao1 yitiao1"
  111.                          "yitiao2 yitiao2";
  112. }
  113. .public-second-hand > .goods > .quick-entry>a:nth-of-type(1){
  114.     grid-area: sige1;
  115. }
  116. .public-second-hand > .goods > .quick-entry>a:nth-of-type(2){
  117.     grid-area: sige2;
  118. }
  119. .public-second-hand > .goods > .quick-entry>a:nth-of-type(3){
  120.     grid-area: sige3;
  121. }
  122. .public-second-hand > .goods > .quick-entry>a:nth-of-type(4){
  123.     grid-area: sige4;
  124. }
  125. .public-second-hand > .goods > .quick-entry>a:nth-of-type(5){
  126.     grid-area: yitiao1;
  127. }
  128. .public-second-hand > .goods > .quick-entry>a:nth-of-type(6){
  129.     grid-area: yitiao2;
  130. }

虽然我还没把grid灵活运用但是稍微还是总结了一下
grid-template-colmuns:先划竖线—》里面的内容怎么写呢？【150px 300px】这样子就有两个块一个150px 一个300px 也可以 repeat(4,1fr) 这样子有4个竖着的块块！
grid-template-rows:横线
别的都没什么好说的
列与行的间距可以用 grid-gap:<row-gap>|<colmun-gap>别问为什么问就是因为短而精炼
grid-templeta-area:这个是分地用的！

  1. .container {
  2.     grid-template-columns: 1fr 1fr 1fr;
  3.     grid-template-rows: 1fr 1fr 1fr 1fr;
  4.     grid-template-areas: 
  5.         "葡萄 葡萄 葡萄"
  6.         "龙虾 养鱼 养鱼"
  7.         "龙虾 养鱼 养鱼"
  8.         "西瓜 西瓜 西瓜";
  9. }
  1. <div class="container">
  2.     <div class="putao"></div>
  3.     <div class="longxia"></div>
  4.     <div class="yangyu"></div>
  5.     <div class="xigua"></div>
  6. </div>

虽然在css上面申明了我这块地要养啥！但是必须得在地上做上标记！

  1. .putao { grid-area: 葡萄; }
  2. .longxia { grid-area: 龙虾; }
  3. .yangyu { grid-area: 养鱼; }
  4. .xigua { grid-area: 西瓜; }


但是我们的二手交易可不是这样子的！他的土地分起来是一块块的！

  1. .public-second-hand > .goods > .goods-list{
  2.     flex-basis: 800px;
  3.     padding: 10px;
  4.     box-sizing: border-box;
  5.     display: grid;
  6.     grid-template-columns: repeat(4,1fr);
  7.     grid-template-rows:repeat(2,1fr);    
  8.     /*分割线 第一个值是row 第二个是colmun*/
  9.     grid-gap: 15px 10px;
  10.     grid-template-areas:"meinv1 meinv2 meinv3 meinv4"
  11.                         "meinv5 meinv6 meinv7 meinv8";
  12. }
  13. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  14.     grid-area: meinv1;
  15. }
  16. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  17.     grid-area: meinv2;
  18. }
  19. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  20.     grid-area: meinv3;
  21. }
  22. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  23.     grid-area: meinv4;
  24. }
  25. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  26.     grid-area: meinv5;
  27. }
  28. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  29.     grid-area: meinv6;
  30. }
  31. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  32.     grid-area: meinv7;
  33. }
  34. .public-second-hand > .goods > .goods-list > .intro:nth-of-type(1){
  35.     grid-area: meinv8;
  36. }

那么这次简短的作业分析就到此结束了！朱老师！！！我们上课确实不容易，现实中都多少是学生工作党您也是有本职工作的，我们在学习的过程中总是有问题的，我们花钱报这个课程是希望找一个老师可以帮助我们解决问题，可是您很忙，很少回我们的信息，可作业也要教，我们得牺牲别的时间来解决这个问题，现在2019年12月30日00点56分我今天有一场期末考试，可我并没有复习一直在研究gird，我考试很慌！虽然考的是jQuery。朱老师在这次作业提交中说这么多话，只是希望您可以在百忙之中抽出时间来帮我们解决问题，3.6K这个价格对于我这个学生也有点困难，我花钱不是为了速成，是想找一个老师可以解决我都问题，即使是简单的提点一下。这份作业老师你可以打回，我只是没有别的途径和你交流而出此下策，请原谅我的鲁莽！抱歉！

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：我没有说过, 要全局使用grid, grid有自己的适用场景, 它适合规范的二维空间元素布局与对齐... 对于简单的一个方向的元素排列 , 用flex肯定更方便, 不要凡事都用grid, 没必要
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