Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid常用的容器、项目属性、仿写PHP中文网首页（局部）
Blogger Information
Blog 17
fans 0
comment 0
visits 6239
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
Grid常用的容器、项目属性、仿写PHP中文网首页（局部）
生活需要加油
Original
302 people have browsed it

Grid常用的容器、项目属性以及仿写PHP中文网首页（局部）

1. Grid常用的容器与项目属性

1.1 容器属性

  1. display: grid: 容器类型(块或行内)
  2. grid-template-row/columns: 创建显式网格
  3. grid-auto-rows/columns: 创建隐式网格
  4. grid-auto-flow: 项目排列方向
  5. gap: 行列间隙
  6. place-content: 项目在容器中的排列方式
  7. place-items: 项目在单元格中的排列方式

1.2 项目属性

  1. grid-row/column: 某项目占据的网格区域
  2. grid-area: grid-row/column语法糖
  3. place-self: 某项目在单元格中的排列方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Grid常用的容器与项目属性</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.       <div class="item">item4</div>
  15.       <div class="item">item5</div>
  16.       <div class="item active">item6</div>
  17.       <div class="item">item7</div>
  18.       <div class="item">item8</div>
  19.       <div class="item">item9</div>
  20.     </div>
  21.   </body>
  22.   <style>
  23.     .container {
  24.       width: 450px;
  25.       height: 450px;
  26.       /* 转为grid网格容器 */
  27.       display: grid;
  28.       border: 1px solid #000;
  29.       /* 1. 显式网格 */
  30.       /* grid-template-columns: 100px 100px 100px;
  31.       grid-template-rows: 100px 100px 100px; */
  32.       grid-template-columns: repeat(3, 100px);
  33.       grid-template-rows: repeat(3, 100px);
  34.       /* 相同相邻的值可简写 */
  35.       /* grid-template-columns: repeat(3, 1fr);
  36.       grid-template-rows: repeat(3, 1fr); */
  37.       /* 项目排列方向 */
  38.       /* grid-auto-flow: column; */
  40.       /* gap: 20px 10px; */
  41.       place-content: space-evenly;
  42.       place-items: start center;
  43.     }
  45.     .container > .item {
  46.       background-color: bisque;
  47.       width: 60px;
  48.       height: 60px;
  49.     }
  51.     .container > .item:first-child {
  52.       /* 利用span直接表示跨越行（列）数 */
  53.       /* grid-area: 1 / 2 / span 2 / span 2; */
  54.     }
  55.     .container > .item.active {
  56.       background-color: lightgreen;
  57.       place-self: center end;
  58.     }
  59.   </style>
  60. </html>

页面效果：

2. 仿写PHP中文网首页:最新课程片断(也可选其它片断)

仿制页面效果如下：

html代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>job</title>
  8.   </head>
  9.   <body>
  10.     <!-- 整体可看成1行2行 -->
  11.     <div class="new-courses">
  12.       <div class="top">
  13.         <h3>最新课程</h3>
  14.         <a href="">更多></a></a>
  15.       </div>
  17.       <!-- 2行5列 -->
  18.       <!-- <div class="courses"> -->
  19.         <ul class="courses">
  20.           <li class="item">
  21.             <a href=""><img src="images/01.jpg" alt="" /></a>
  22.             <div class="detail">
  23.               <div>
  24.                 <span>初级</span>
  25.                 <a href="" target="_blank" title="Laravel 8 课程精讲（台湾同胞版）" class="aBlack">Laravel 8 课程精讲（台湾同胞版）</a>
  26.               </div>
  27.               <div class="desc">
  28.                 <span>1234次学习</span>
  29.                 <span>收藏</span>
  30.               </div>
  31.             </div>
  32.           </li>
  33.            <li class="item">
  34.             <a href=""><img src="images/02.jpg" alt="" /></a>
  35.             <div class="detail">
  36.               <div>
  37.                 <span>初级</span>
  38.                 <a href="">PHP入门速学（台湾同胞版）</a>
  39.               </div>
  40.               <div class="desc">
  41.                 <span>1234次学习</span>
  42.                 <span>收藏</span>
  43.               </div>
  44.             </div>
  45.           </li>
  46.           <li class="item">
  47.             <a href=""><img src="images/03.jpg" alt="" /></a>
  48.             <div class="detail">
  49.               <div>
  50.                 <span>初级</span>
  51.                 <a href="">Apipost从入门到精通</a>
  52.               </div>
  53.               <div class="desc">
  54.                 <span>1234次学习</span>
  55.                 <span>收藏</span>
  56.               </div>
  57.             </div>
  58.           </li><li class="item">
  59.             <a href=""><img src="images/04.png" alt="" /></a>
  60.             <div class="detail">
  61.               <div>
  62.                 <span>初级</span>
  63.                 <a href="">Apipost从入门到精通</a>
  64.               </div>
  65.               <div class="desc">
  66.                 <span>1234次学习</span>
  67.                 <span>收藏</span>
  68.               </div>
  69.             </div>
  70.           </li><li class="item">
  71.             <a href=""><img src="images/05.jpg" alt="" /></a>
  72.             <div class="detail">
  73.               <div>
  74.                 <span>初级</span>
  75.                 <a href="">帝国CMS企业仿站教程</a>
  76.               </div>
  77.               <div class="desc">
  78.                 <span>1234次学习</span>
  79.                 <span>收藏</span>
  80.               </div>
  81.             </div>
  82.           </li><li class="item">
  83.             <a href=""><img src="images/06.jpg" alt="" /></a>
  84.             <div class="detail">
  85.               <div>
  86.                 <span>初级</span>
  87.                 <a href="">WordPress零基础新手搭建个人博客及企业网站</a>
  88.               </div>
  89.               <div class="desc">
  90.                 <span>1234次学习</span>
  91.                 <span>收藏</span>
  92.               </div>
  93.             </div>
  94.           </li><li class="item">
  95.             <a href=""><img src="images/07.jpg" alt="" /></a>
  96.             <div class="detail">
  97.               <div>
  98.                 <span>初级</span>
  99.                 <a href="">极致CMS零基础建站教学视频</a>
  100.               </div>
  101.               <div class="desc">
  102.                 <span>1234次学习</span>
  103.                 <span>收藏</span>
  104.               </div>
  105.             </div>
  106.           </li><li class="item">
  107.             <a href=""><img src="images/08.jpg" alt="" /></a>
  108.             <div class="detail">
  109.               <div>
  110.                 <span>初级</span>
  111.                 <a href="">前端项目-尚优选【HTML/CSS/JS技术综合实战】
  112. </a>
  113.               </div>
  114.               <div class="desc">
  115.                 <span>1234次学习</span>
  116.                 <span>收藏</span>
  117.               </div>
  118.             </div>
  119.           </li><li class="item">
  120.             <a href=""><img src="images/09.jpg" alt="" /></a>
  121.             <div class="detail">
  122.               <div>
  123.                 <span>初级</span>
  124.                 <a href="">Vue3.0从0到搭建通用后台管理系统项目实战</a>
  125.               </div>
  126.               <div class="desc">
  127.                 <span>1234次学习</span>
  128.                 <span>收藏</span>
  129.               </div>
  130.             </div>
  131.           </li><li class="item">
  132.             <a href=""><img src="images/10.jpg" alt="" /></a>
  133.             <div class="detail">
  134.               <div>
  135.                 <span>初级</span>
  136.                 <a href="">零基础前端课程【Vue进阶学习及实战应用】</a>
  137.               </div>
  138.               <div class="desc">
  139.                 <span>1234次学习</span>
  140.                 <span>收藏</span>
  141.               </div>
  142.             </div>
  143.           </li>
  144.         </ul>
  145.       <!-- </div> -->
  146.     </div>
  147.     <style>
  149.       * {
  150.         margin: 0;
  151.         padding: 0;
  152.         box-sizing: border-box;
  153.       }
  154.       body{
  155.         background-color: #F2F5F7;
  156.       }
  157.       body a{
  158.         color: #555;
  159.         text-decoration: none;
  160.       }
  161.       .new-courses {
  162.         width: 1200px;
  163.         margin: auto;
  164.         display: grid;
  165.         grid-template-rows: 75px 530px;
  166.         grid-template-columns: repeat(1, 1fr);
  167.         gap:10px;
  169.       }
  170.       .top {
  171.         width: 1200px;
  172.         height: 75px;
  173.         display: grid;
  174.         grid-template-rows: repeat(1, 1fr);
  175.         grid-template-columns: repeat(2, 1fr);
  176.         place-content: space-between;
  177.         place-items: center;
  178.       }
  179.       .top>:first-child{
  180.         place-self: center start;
  181.       }
  182.       .top a {
  183.         place-self: center end;
  184.         padding:10px 20px;
  185.       }
  186.       .top a:hover {
  188.         cursor: pointer;
  189.         background-color: red;
  190.         border-radius: 10px;
  191.         color: white;
  192.         transition: 0.5s;
  194.       }
  195.       .courses{
  196.         display: grid;
  197.         grid-template-rows: repeat(2,1fr);
  198.         grid-template-columns: repeat(5,1fr);
  200.         gap: 30px 20px;
  201.       }
  202.       .courses .detail{
  203.         padding:10px;
  204.       }
  205.       .courses li.item{
  206.         /* width: 330px; */
  207.         height: 250px;
  208.         list-style: none;
  209.         border-radius: 10px;
  210.         background-color:white;
  211.         display: flex;
  212.         flex-flow: column nowrap;
  213.       }
  214.       .courses li.item a{
  215.         border-radius: 10px 10px 0 0;
  216.         overflow: hidden;
  217.       }
  219.       .courses li.item a img{
  220.         width: 224px;
  221.         object-fit: fill;
  222.         overflow: hidden;
  223.       }
  224.     .courses li.item a img:hover{
  225.         transform: scale(1.1);
  226.       }
  227.       .courses li.item .detail div{
  228.         height: 75px;
  229.       }
  231.       .courses li.item .detail div:first-child span{
  232.         display: inline-block;
  233.         padding:2px 4px;
  234.         background-color: #DFE8FC;
  235.         font-size: 11px;
  236.       }
  238.       .courses li.item .detail a{
  239.         display: inline;
  240.         font-size: 14px;
  241.         text-decoration: none;
  242.       }
  243.       .courses li.item .detail .desc{
  244.         height: 30px;
  245.         display: flex;
  246.         flex-flow: row nowrap;
  247.         place-content: space-between;
  248.       }
  250.     </style>
  251.   </body>
  252. </html>

3. 总结：

grid布局运用起来确实方便，功能更强大，老师总结后属性已经相对简单！。

Correcting teacher：PHPzPHPz

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