search

博客列表 >12.28用Grid网格布局重写网页组件

12.28用Grid网格布局重写网页组件

曾
曾原创
2019年12月28日 21:11:56566浏览

今天学习了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="public-second-hand.css">
  7. </head>
  8. <body>
  9. <div class="public-second-hand">
  10.     <div class="item1">
  11.         <a href="">抢好货</a>
  12.         <div>
  13.             <span>0低价</span>
  14.             <span>安全</span>
  15.             <span>便捷</span>
  16.             <span>快速</span>
  17.         </div>
  18.     </div>
  19.     <div class="item2">
  20.         <span>热门分类</span>
  21.         <div>
  22.             <a href="">美女写真</a>
  23.             <a href="">日本美女</a>
  24.             <a href="">美国美女</a>
  25.             <a href="">国内美女</a>
  26.             <a href="">AV美女</a>
  27.         </div>
  28.     </div>
  29.     <div class="item3">
  30.         <div class="item3-pic">
  31.                <img src="../static/images/shop/shop8.jpg" alt="">
  32.                <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  33.                <span>&yen;333</span>
  34.                <span>美女</span>
  35.            </div>
  36.         <div class="item3-pic">
  37.             <img src="../static/images/shop/shop8.jpg" alt="">
  38.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  39.             <span>&yen;333</span>
  40.             <span>美女</span>
  41.         </div>
  42.         <div class="item3-pic">
  43.             <img src="../static/images/shop/shop8.jpg" alt="">
  44.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  45.             <span>&yen;333</span>
  46.             <span>美女</span>
  47.         </div>
  48.         <div class="item3-pic">
  49.             <img src="../static/images/shop/shop8.jpg" alt="">
  50.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  51.             <span>&yen;333</span>
  52.             <span>美女</span>
  53.         </div>
  54.         <div class="item3-pic">
  55.             <img src="../static/images/shop/shop8.jpg" alt="">
  56.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  57.             <span>&yen;333</span>
  58.             <span>美女</span>
  59.         </div>
  60.         <div class="item3-pic">
  61.             <img src="../static/images/shop/shop8.jpg" alt="">
  62.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  63.             <span>&yen;333</span>
  64.             <span>美女</span>
  65.         </div>
  66.         <div class="item3-pic">
  67.             <img src="../static/images/shop/shop8.jpg" alt="">
  68.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  69.             <span>&yen;333</span>
  70.             <span>美女</span>
  71.         </div>
  72.         <div class="item3-pic">
  73.             <img src="../static/images/shop/shop8.jpg" alt="">
  74.             <span>美女性感写真海报墙艺术装饰画帖画图1</span>
  75.             <span>&yen;333</span>
  76.             <span>美女</span>
  77.         </div>
  78.     </div>
  79.     <div class="item4">
  80.         <div class="item4-quick">
  81.             <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  82.         </div>
  83.         <div class="item4-quick">
  84.         <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  85.     </div>
  86.         <div class="item4-quick">
  87.             <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  88.         </div>
  89.         <div class="item4-quick">
  90.             <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  91.         </div>
  92.         <div class="item4-ad1"><img src="../static/images/ad/image.png" alt=""></div>
  93.         <div class="item4-ad2"><img src="../static/images/ad/ad2.jpg" alt=""></div>
  94.     </div>
  95. </div>
  96. </body>
  97. </html>

CSS代码

  1. @import "../public-reset.css";
  3. /*设置网格大小*/
  4. .public-second-hand{
  5.     width: 1200px;
  6.     height: 580px;
  7.     display: grid;
  8.     /*grid-gap: 10px 10px;*/
  9.     box-sizing: border-box;
  10.     background-color: white;
  11.     margin: 30px auto;
  12.     /*画网格列方向4列*/
  13.     grid-template-columns: 1fr 1fr 1fr;
  14.     /*画网格行方向3行*/
  15.     grid-template-rows: 60px 60px 1fr;
  16.     outline: 1px dashed red;
  17.     border-radius: 10px;
  18. }
  19. /*设置第一个项目第一行排列合并*/
  20. .public-second-hand>.item1{
  21.     /*background-color: red;*/
  22.     grid-column: 1 / 4;
  23.     grid-row: 1 ;
  24.     display: flex;
  25.     align-items: end;
  26.     border-bottom: 1px solid lightgray;
  27.     margin: 0 10px;
  28.     padding: 10px 0;
  29.     box-sizing: border-box;
  30. }
  31. /*设置第一个标题A标签大小*/
  32. .public-second-hand>.item1>a{
  33.     font-size: 24px;
  34. }
  35. /*设置A标签旁边项目的距离*/
  36. .public-second-hand>.item1>div{
  37.     margin-left: 10px;
  38. }
  39. /*设置SPAN颜色*/
  40. .public-second-hand>.item1>div>span{
  41.     color: red;
  42. }
  43. /*设置第二个项目第二行排列合并*/
  44. .public-second-hand>.item2{
  45.     /*background-color: yellowgreen;*/
  46.     grid-column: 1 / 4;
  47.     grid-row: 2 / 3;
  48.     display: flex;
  49.     align-items: end;
  50.     margin: 0 10px;
  51.     padding-bottom: 20px;
  52.     box-sizing: border-box;
  53. }
  55. .public-second-hand>.item2>span{
  56.     font-size: 24px;
  57.     color: red;
  58. }
  60. .public-second-hand>.item2>div>a{
  61.     margin: 0 10px;
  62. }
  63. /*设置第三个项目第三行和第一到第二列合并*/
  64. .public-second-hand>.item3{
  65.     width: 800px;
  66.     height: 460px;
  67.     /*background-color: lightsalmon;*/
  68.     grid-column: 1 / 3;
  69.     grid-row: 3 / 4 ;
  70.     display: grid;
  71.     /*画网格列方向4个相同大小*/
  72.     grid-template-columns: repeat(4,190px);
  73.     /*画网格行方向2个相同大小*/
  74.     grid-template-rows: repeat(2,1fr);
  75.     padding-left: 10px;
  76.     box-sizing: border-box;
  77.     grid-gap: 20px 0;
  78. }
  79. .public-second-hand>.item3 img{
  80.     width: 180px;
  81.     height: 124px;
  82.     border: 1px solid lightgray;
  83.     border-radius: 5px;
  84. }
  85. .public-second-hand>.item3>.item3-pic{
  86.     display: grid;
  87.     justify-items: center;
  88.     /*列方向2个相同大小*/
  89.     grid-template-columns: 1fr 1fr;
  90.     /*行方向3行*/
  91.     grid-template-rows: 130px 1fr 1fr;
  93. }
  94. .public-second-hand>.item3>.item3-pic > img{
  95.     /*合并网格从列1号线开始，相邻两条列线，行方向第一行*/
  96.     grid-column: 1 / span 2;
  97.     grid-row: 1 / 2;
  99. }
  100. .public-second-hand>.item3>.item3-pic >span:first-of-type{
  101. /*合并网格从列1号线开始，相邻两条列线，行第2条线开始，第三条线结束，相交区域合并*/
  102.     grid-column: 1 / span 2;
  103.     grid-row: 2 / 3;
  104.     align-self: center;
  105. }
  106. .public-second-hand>.item3>.item3-pic >span:nth-of-type(2){
  107.     /*单独设置项目在列方向的对齐方式*/
  108.     align-self: center;
  109.     /*设置项目在行方向的对齐方式*/
  110.     justify-self: flex-start;
  111. }
  112. .public-second-hand>.item3>.item3-pic >span:last-of-type{
  113.     /*单独设置项目在列方向的对齐方式*/
  114.     align-self: center;
  115.     /*设置项目在行方向的对齐方式*/
  116.     justify-self: end;
  117.     background-color: lightgreen;
  118.     padding: 3px;
  119.     border-radius: 5px;
  120.     color: white;
  121. }
  122. .public-second-hand>.item4{
  123.     /*转为网格布局*/
  124.     display: grid;
  125.     /*两列*/
  126.     grid-template-columns:1fr 1fr;
  127.     /*四行*/
  128.     grid-template-rows:130px 130px 1fr 1fr;
  129.     padding-right:5px;
  130.     grid-gap: 10px 0;
  131.     box-sizing: border-box;
  132. }
  134. .public-second-hand>.item4>.item4-quick{
  135.     padding-right:10px;
  136.     box-sizing: border-box;
  138. }
  140. .public-second-hand>.item4>.item4-ad1{
  141.     grid-column: 1 / 3;
  142.     grid-row: 3 / 4;
  143.     align-self: end;
  144.     margin-top: 10px;
  145. }
  146. .public-second-hand>.item4>.item4-ad2{
  147.     grid-column: 1 / 3;
  148.     grid-row: 4 / 5;
  149.     align-self: center;
  150. }

效果图

第一次使用Grid网格不就，第一个感觉就是别扭，需要去计算每一行，每一列要去给多少像素，最开始整体布局用Grid布置出来了，在两个标题还是嵌套了Flex去写，后来想了想今天学的Grid布局，最好就用网格布局来写，在下面主体内容都是用网格布局，慢慢写出来的，发现在项目对齐上有些属性和Flex有共同处。
最近接受的知识有点多，需要慢慢的去消化一下才行，没事还得复习一下前几天的内容，不然久了容易忘记。
比如FORM表单的内容，现在感觉都已经很模糊了= =，今天把作业提交了，明天就开始复习一下，不然就是猴子掰苞谷，一直拿一直丢。

上一条：综合实战第一课：laravel基础-PHP培训九期线上班下一条：2019年12月27日 作业 m.php.cn网站的首页布局(Flex实现)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多