简体中文（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

博客列表 >php中文网grid布局实战

php中文网grid布局实战

王佳祥
王佳祥原创
2020年06月29日 10:20:30855浏览

php中文网grid布局实战

  • php中文网原图：

  • 自己写的效果：

  • 代码：
  1. <!-- php入门精品课程开始 -->
  2.     <div  class="content5 flexCompatible flexVertical flexShrinkFixed">
  3.       <div class="flexCompatible flexVertical">
  4.       <div class="top">
  5.         <span class="iconfont icon-daima2"></span>
  6.         <h2>PHP入门精品课程</h2>
  7.         <span class="iconfont icon-daima2"></span>
  8.       </div>
  9.       <div class="bottom ">
  10.         <ul>
  11.           <li><img src="images/入门精品课程.jpg" alt=""></li>
  12.           <li>
  13.             <a href="">
  14.               <img src="images/t1.jpg" alt="">
  15.               <div>
  16.                 <div>
  17.                   <span class="span1">中级</span>
  18.                   <span>ThinkPHP6.0极速入门</span>
  19.                 </div>
  20.                 <div><span class="span2">4W+次播放</span></div>
  21.               </div>
  22.             </a>
  23.           </li>
  24.           <li>
  25.             <a href="">
  26.               <img src="images/t2.png" alt="">
  27.               <div>
  28.                 <div>
  29.                   <span class="span1">初级</span>
  30.                   <span>编程学习方法分享直播</span>
  31.                 </div>
  32.                 <div><span class="span2">1W+次播放</span></div>
  33.               </div>
  34.             </a>
  35.           </li>
  36.           <li>
  37.             <a href="">
  38.               <img src="images/t3.jpg" alt="">
  39.               <div>
  40.                 <div>
  41.                   <span class="span1">初级</span>
  42.                   <span>2018前端入门_HTML5</span>
  43.                 </div>
  44.                 <div><span class="span2">18W+次播放</span></div>
  45.               </div>
  46.             </a>
  47.           </li>
  48.           <li>
  49.             <a href="">
  50.               <img src="images/t4.jpg" alt="">
  51.               <div>
  52.                 <div>
  53.                   <span class="span1">中级</span>
  54.                   <span>CSS视频教程-玉女心经</span>
  55.                 </div>
  56.                 <div><span class="span2">10W+次播放</span></div>
  57.               </div>
  58.             </a>
  59.           </li>
  60.           <li>
  61.             <a href="">
  62.               <img src="images/t5.jpg" alt="">
  63.               <div>
  64.                 <div>
  65.                   <span class="span1">初级</span>
  66.                   <span>JavaScript极速入门</span>
  67.                 </div>
  68.                 <div><span class="span2">18W+次播放</span></div>
  69.               </div>
  70.             </a>
  71.           </li>
  72.           <li>
  73.             <a href="">
  74.               <img src="images/t6.jpg" alt="">
  75.               <div>
  76.                 <div>
  77.                   <span class="span1">中级</span>
  78.                   <span>孤独九剑(6)_jQuery</span>
  79.                 </div>
  80.                 <div><span class="span2">12W+次播放</span></div>
  81.               </div>
  82.             </a>
  83.           </li>
  84.           <li>
  85.             <a href="">
  86.               <img src="images/t7.jpeg" alt="">
  87.               <div>
  88.                 <div>
  89.                   <span class="span1">初级</span>
  90.                   <span>30分钟学会网站布局</span>
  91.                 </div>
  92.                 <div><span class="span2">6W+次播放</span></div>
  93.               </div>
  94.             </a>
  95.           </li>
  96.           <li>
  97.             <a href="">
  98.               <img src="images/t8.jpg" alt="">
  99.               <div>
  100.                 <div>
  101.                   <span class="span1">初级</span>
  102.                   <span>[公益直播课]Web前端</span>
  103.                 </div>
  104.                 <div><span class="span2">5W+次播放</span></div>
  105.               </div>
  106.             </a>
  107.           </li>
  108.           <li>
  109.             <a href="">
  110.               <img src="images/t9.jpg" alt="">
  111.               <div>
  112.                 <div>
  113.                   <span class="span1">初级</span>
  114.                   <span>phpSyudy极速入门视频</span>
  115.                 </div>
  116.                 <div><span class="span2">40W+次播放</span></div>
  117.               </div>
  118.             </a>
  119.           </li>
  120.           <li>
  121.             <a href="">
  122.               <img src="images/t10.jpg" alt="">
  123.               <div>
  124.                 <div>
  125.                   <span class="span1">中级</span>
  126.                   <span>孤独九剑(4)_PHP视频</span>
  127.                 </div>
  128.                 <div><span class="span2">50W+次播放</span></div>
  129.               </div>
  130.             </a>
  131.           </li>
  132.           <li>
  133.             <a href="">
  134.               <img src="images/t11.jpg" alt="">
  135.               <div>
  136.                 <div>
  137.                   <span class="span1">初级</span>
  138.                   <span>php完全自学手册</span>
  139.                 </div>
  140.                 <div><span class="span2">20W+次播放</span></div>
  141.               </div>
  142.             </a>
  143.           </li>
  144.           <li>
  145.             <a href="">
  146.               <img src="images/t12.jpg" alt="">
  147.               <div>
  148.                 <div>
  149.                   <span class="span1">初级</span>
  150.                   <span>MySQL权威开发指南</span>
  151.                 </div>
  152.                 <div><span class="span2">2W+次播放</span></div>
  153.               </div>
  154.             </a>
  155.           </li>
  156.           <li>
  157.             <a href="">
  158.               <img src="images/t13.jpg" alt="">
  159.               <div>
  160.                 <div>
  161.                   <span class="span1">中级</span>
  162.                   <span>[公益直播课]php实战</span>
  163.                 </div>
  164.                 <div><span class="span2">3W+次播放</span></div>
  165.               </div>
  166.             </a>
  167.           </li>
  168.         </ul>
  169.       </div>
  170.     </div>
  171.     </div>
  172.     <!-- php入门精品课程结束 -->
  • css代码：
  1. .content5 {
  2.   width: 1200px;
  3.   height: 666px;
  4. }
  5. .content5 > div {
  6.   width: 1200px;
  7.   height: 646px;
  8.   margin-top: 20px;
  9.   background: #fff;
  10.   border-radius: 10px;
  11.   box-shadow: 0 0 5px #888888;
  12. }
  14. .content5 > div > .top {
  15.   width: 1200px;
  16.   height: 50px;
  17.   display: grid;
  18.   grid-template-columns: 1fr 170px 1fr;
  19. }
  20. .content5 > div > .top > span {
  21.   color: RGB(95, 159, 255);
  22.   font-weight: bold;
  23. }
  24. .content5 > div > .top > span:first-of-type {
  25.   align-self: center;
  26.   justify-self: end;
  27. }
  28. .content5 > div > .top > span:last-of-type {
  29.   align-self: center;
  30. }
  31. .content5 > div > .top > h2 {
  32.   font-size: 20px;
  33.   font-family: "宋体";
  34.   color: RGB(77, 85, 93);
  35.   padding: 0 5px;
  36.   align-self: center;
  37.   justify-self: center;
  38. }
  39. .content5 > div > .bottom ul {
  40.   width: 1200px;
  41.   height: 576px;
  42.   display: grid;
  43.   grid-template-columns: repeat(5, 217px);/*3行5列*/
  44.   grid-template-rows: repeat(3, 172px);
  45.   grid-gap: 20px 19px;
  46.   margin: 15px 0 0 19px;
  47. }
  48. .content5 > div > .bottom > ul > li {
  49.   width: 217px;
  50.   height: 172px;
  51.   position: relative;
  52.   box-shadow: 0 0 5px #888888;
  53.   border-radius: 5px;
  54. }
  55. .content5 > div > .bottom > ul > li:first-of-type {
  56.   width: 217px;
  57.   height: 362px;
  58.   grid-row: 1/3;
  59.   border-radius: 5px;
  60.   box-shadow: 0 0 5px #888888;
  61. }
  62. .content5 > div > .bottom > ul > li:first-of-type img {
  63.   width: 217px;
  64.   height: 362px;
  65.   border-radius: 5px;
  66.   box-shadow: 0 0 5px #888888;
  67. }
  68. .content5 > div > .bottom > ul > li img {
  69.   width: 217px;
  70.   height: 124px;
  71.   border-radius: 5px 5px 0 0;
  72.   z-index: 10;
  73. }
  74. .content5 > div > .bottom > ul > li > a > div {
  75.   width: 217px;
  76.   height: 80px;
  77.   z-index: 99;
  78.   background: #fff;
  79.   position: absolute;
  80.   top: 92px;
  81.   border-radius: 5px;
  82. }
  83. .content5
  84.   > div
  85.   > .bottom
  86.   > ul
  87.   > li:not(:first-of-type)
  88.   > a
  89.   > div
  90.   > div:first-of-type {
  91.   width: 217px;
  92.   height: 40px;
  93.   color: RGB(87, 96, 100);
  94.   display: grid;
  95.   grid-template-columns: repeat(11, 1fr);
  96. }
  97. .content5 > div > .bottom > ul > li:not(:first-of-type) > a .span1 {
  98.   background: RGB(147, 153, 159);
  99.   padding: 0 2px;
  100.   margin: 0;
  101.   color: #fff;
  102.   grid-column: 2/4;
  103.   align-self: end;
  104.   justify-self: start;
  105. }
  106. .content5
  107.   > div
  108.   > .bottom
  109.   > ul
  110.   > li:not(:first-of-type)
  111.   > a
  112.   > div
  113.   > div:first-of-type
  114.   > span:last-of-type {
  115.   grid-column: 4/12;
  116.   align-self: end;
  117.   justify-self: start;
  118. }
  119. .content5
  120.   > div
  121.   > .bottom
  122.   > ul:first-of-type
  123.   > li:not(:first-of-type)
  124.   > a
  125.   > div
  126.   > div:last-of-type {
  127.   width: 217px;
  128.   height: 40px;
  129.   display: grid;
  130.   grid-template-columns: repeat(11, 1fr);
  131. }
  132. .content5
  133.   > div
  134.   > .bottom
  135.   > ul:first-of-type
  136.   > li:not(:first-of-type)
  137.   > a
  138.   .span2 {
  139.   color: RGB(147, 153, 159);
  140.   font-size: 14px;
  141.   grid-column: 2/8;
  142.   align-self: center;
  143.   justify-self: start;
  144. }
  145. .content5 > div > .bottom > ul > li a {
  146.   color: RGB(87, 96, 100);
  147. }

学习总结

1.grid基本概念

  1. 采用网格布局的区域，称为"容器"（container）
  2. 容器内部采用网格定位的子元素，称为"项目"（item）
  3. 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
  4. 行和列的交叉区域，称为"单元格"（cell）
  5. 划分网格的线，称为"网格线"（grid line）

2.容器属性

  1. display: grid指定一个容器采用网格布局
  3. grid-template-columns属性定义每一列的列宽 px / % / fr
  4. grid-template-rows属性定义每一行的行高  px / % / fr
  6. repeat()函数，简化重复的值,第一个参数是重复的次数，第二个参数是所要重复的值
  7. auto-fill关键字表示自动填充
  8. fr关键字相当于auto，系统自动计算
  9. minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值
  11. grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
  12. grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，
  13. grid-gap: <grid-row-gap> <grid-column-gap>;
  15. grid-template-areas属性用于定义区域，一个区域由单个或多个单元格组成
  16. 如果某些区域不需要利用，则使用"点"（.）表示
  18. grid-auto-flow属性决定容器子元素的排列顺序
  19. 默认值是row，即"先行后列"；也可以将它设成column，变成"先列后行；
  20. row dense， 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
  21. column dense， 表示"先列后行"，并且尽量填满空格
  23. justify-items 属性设置单元格内容的水平位置（左中右）
  24. align-items 属性设置单元格内容的垂直位置（上中下）
  25. place-items 属性是align-items属性和justify-items属性的合并简写形式
  26. place-items: <align-items> <justify-items>;
  28. grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
  30. grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

3.项目属性

  1. 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线
  3. grid-column-start属性：左边框所在的垂直网格线
  4. grid-column-end属性：右边框所在的垂直网格线
  5. grid-row-start属性：上边框所在的水平网格线
  6. grid-row-end属性：下边框所在的水平网格线
  8. 这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
  9. 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序
  11. grid-column属性是grid-column-start和grid-column-end的合并简写形式
  12. grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
  14. grid-area属性指定项目放在哪一个区域
  15. grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
  17. justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
  18. align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
  20. place-self属性是align-self属性和justify-self属性的合并简写形式
  21. place-self: <align-self> <justify-self>;
上一条：flex PC端的一个布局方案 一个移动端的布局方案下一条：固定表头/文本框只能输入数字
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多