Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid常用的容器与项目属性 仿写PHP中文网首页:最新课程片断(也可选其它片断)
Blogger Information
Blog 16
fans 0
comment 1
visits 5771
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中文网首页:最新课程片断(也可选其它片断)
P粉890456325
Original
314 people have browsed it

1. 实例演示Grid常用的容器与项目属性 2. 仿写PHP中文网首页:最新课程片断(也可选其它片断)

grid常用的容器与项目的属性

  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>Document</title>
  8.     <style>
  9.       .container0 {
  10.         width: 300px;
  11.         height: 150px;
  12.         /* 转为grid网格容器 */
  13.         display: grid;
  15.         /* 任务: 创建一个3行3列的容器 */
  16.         /* 1. 显式网格 */
  17.         /* grid-template-columns: 100px 100px 100px;
  18.         grid-template-rows: 50px 50px 50px; */
  20.         /* 对于相同且相邻的值,可以用repeat()简化 */
  21.         /* grid-template-columns: repeat(3, 100px);
  22.         grid-template-rows: repeat(3, 50px); */
  24.         /* 宽度300px,分3份,每1份肯定是100px */
  25.         /* 新单位: fr, 比例 */
  26.         grid-template-columns: repeat(3, 1fr);
  27.         grid-template-rows: repeat(3, 1fr);
  28.       }
  30.       /* grid容器的项目: 容器的子元素 */
  31.       .container0 > .item0 {
  32.         background-color: bisque;
  33.       }
  35.       .container0 > .item0:first-child {
  36.         /* 默认位置 */
  37.         /* grid-row-start: 1;
  38.         grid-row-end: 2; 
  39.         行开始与行结束
  40.         */
  42.         /* grid-row: 1 / 2; 行合并写法*/
  44.         /* grid-column-start: 1;
  45.         grid-column-end: 2; 
  46.         列开始与列结束
  47.         */
  49.         /* grid-column: 1 / 2; *行合并写法/
  51.         /* grid-row/column: 行(列)起始编号 / 行(列)结束编号 */
  53.         /* 可以将项目移动到容器空间的任意位置上 */
  55.         /* 正中间 */
  56.         /* grid-row: 2 / 3;
  57.         grid-column: 2 / 3; */
  59.         /* 一个项目至少要占据一个单元格,一个单元格,默认跨越1行1列 */
  61.         /*简化写法
  62.          grid-row: 2;
  63.         grid-column: 2; */
  65.         /* 从正中间,跨越2行2列,如何布局 */
  67.         /* grid-row: 2 / 4;
  68.         grid-column: 2 / 4; */
  70.         /* 当单元格跨越多个时,形成一个矩形的空间,称为"网格区域" */
  72.         /* 只关心跨越几行几列,至于结束的行号和列号并不关心 */
  74.         /* grid-row: 2 / span 2;
  75.         grid-column: 2 / span 2; */
  77.         /* span跨越多行多列可形成一个网格区域,使用以上的2个属性,可以简化以上的操作 */
  79.         /* area区域的意思  grid-area: 行开始 / 列开始 / 行结束 / 列结束 */
  80.         /* grid-area: 2 / 2 / 4 / 4; */
  81.         /* 向上一行 */
  82.         /* grid-area: 1 / 2 / 3 / 4; */
  84.         grid-area: 1 / 2 / span 2 / span 2;
  86.         /* 当前,如果是 span 1 可以简化,如果span 1不在最后的位置不能省 */
  87.       }
  88.     </style> 
  89. </head>
  90. <body>
  91.    <div class="container1">
  92.         <div class="item1">item1</div>
  93.    </div> 
  94. <hr>
  97.    <style>
  98.     .container1{
  99.         width: 300px;
  100.         height: 150px;
  101.         display: grid;
  102.         grid-template-columns: repeat(3,1fr);
  103.         grid-template-rows: repeat(3,1fr);
  104.     }
  105.     .container1 >.item1{
  106.         background-color: red;
  107.     }
  108.     .container1>.item1:first-child{
  109.         grid-area: 3/2/span 2/span 2;
  110.     }
  111.     </style>
  113. <hr>
  115.    <div class="container">
  116.     <div class="item">item1</div>
  117.     <div class="item">item2</div>
  118.     <div class="item">item3</div>
  119.     <div class="item">item4</div>
  120.     <div class="item">item5</div>
  121.     <div class="item">item6</div>
  122.     <div class="item">item7</div>
  123.     <div class="item">item8</div>
  124.     <div class="item">item9</div>
  126.     <!-- 当前容器有9个单元格,默认可以放入9个项目 -->
  127.     <!-- 如果项目数量 > 9, 会什么 -->
  129.     <div class="item add">item10</div>
  130.     <div class="item add">item11</div>
  131.   </div>
  135.     <style>
  136.       .container {
  137.         width: 300px;
  138.         height: 300px;
  139.         padding: 5px;
  140.         background-color: antiquewhite;
  141.         border: 1px solid forestgreen;
  143.         display: grid;
  145.         /* 显式网格 */
  146.         grid-template-columns: repeat(3, 1fr);
  147.         grid-template-rows: repeat(3, 1fr);
  149.         /* 1. 排列规则 */
  150.         /* row: 行优先,默认值 */
  151.         /* grid-auto-flow: row; */
  152.         /* grid-auto-flow: column; */
  154.         /* 2. 隐式网格 */
  155.         /* 超出显式网格数量的项目,创建在隐式网格中(自动生成) */
  156.         /* grid-auto-rows: 50px; */
  157.         /* grid-auto-rows: 1fr; */
  158.         /* gap: 行列间隙/轨道间距 */
  159.         /* gap: 垂直方向  水平方向 */
  160.         /* gap:5px 5px;
  161.         gap: 10px 5px;
  162.         gap: 10px 10px; */
  163.         gap: 5px; 
  165.       }
  167.       /* 项目*/
  168.       .container > .item {
  169.         background-color: bisque;
  171.       }
  172.       .container > .item.add {
  173.         background-color: violet;
  174.         /* 如果是行优先,高度就是默认的内容高度 */
  175.       }
  176.     </style>
  178. <hr>
  179. <hr>
  181. <div class="container2">
  182.   <div class="item2">item1</div>
  183.   <div class="item2">item2</div>
  184.   <div class="item2">item3</div>
  185.   <div class="item2">item4</div>
  186.   <div class="item2 active">item5</div>
  187.   <div class="item2">item6</div>
  188.   <div class="item2">item7</div>
  189.   <div class="item2">item8</div>
  190.   <div class="item2">item9</div>
  191. </div>
  193. <style>
  194.   .container2 {
  195.     /* width: 300px;
  196.     height: 300px; */
  197.     width: 450px;
  198.     height: 450px;
  199.     border: 1px solid #000;
  200.     background-color: lightcyan;
  202.     display: grid;
  204.     /* 显式网格 */
  205.     grid-template-columns: repeat(3, 100px);
  206.     grid-template-rows: repeat(3, 100px);
  208.     /*
  209.     1. 对齐前提: 容器中必须存在"剩余空间"(待分配的空间)
  210.     2. 对齐本质: 剩余空间,在"项目"之间的分配方案
  211.     3. 剩余空间: Flex(主轴,交叉轴), Grid(容器,单元格)
  212.     */
  214.     /* 1. 项目在"容器"中的对齐 */
  215.     /* place-content: 垂直方向 水平方向; */
  216.     /* 默认左上角,行与列的起始编号 */
  217.     place-content: start start;
  218.     /* 垂直居中,水平居右 */
  219.     place-content: center end;
  221.     /* 垂直,水平全居中 */
  222.     /* place-content: center center; */
  223.     /* 双值相同, 可只写一个 */
  224.     place-content: center;
  225.     /* 剩余空间还可以在所有项目之间进行分配 */
  226.     place-content: space-between space-around;
  227.     place-content: space-between space-between;
  228.     place-content: space-between;
  229.     place-content: space-around;
  231.     /* 2. 项目在"单元格"中的对齐 */
  232.     /* place-items: 垂直方向 水平方向; */
  233.     place-items: start start;
  234.     place-items: start end;
  235.     place-items: center center;
  236.     place-items: center;
  237.     place-items: end;
  238.     place-items: start;
  240.     /* position: relative; */
  241.   }
  243.   /* 项目*/
  244.   .container2 > .item2 {
  245.     background-color: bisque;
  247.     /* 默认,项目会充满单元格 */
  248.     width: 50px;
  249.     height: 50px;
  251.         /* 传统margin  */
  252.         /* 要求 5px 间隙 */
  253.         /* margin: 5px; */
  254.         /* margin-right: 5px;
  255.         margin-bottom: 5px; */
  257.   }
  259.   .container2 > .item2.active {
  260.     background-color: violet;
  262.     /* 某个项目,有特殊的对齐要求 */
  263.     place-self: end;
  264.     place-self: center;
  265.     /* position: relative;
  266.     top: 10px;
  267.     left: 10px; */
  269.     /* position: absolute;
  271.     top: 0;
  272.     left: 0; */
  273.   }
  274. </style>
  277. </body>
  278. </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>Document</title>
  8.     <style>
  9.      *{
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.      }
  14.      body{
  15.         background-color: gainsboro;
  16.      }
  17.      ul li{
  18.         list-style: none;
  19.      }
  20.      a{
  21.         text-decoration: none;
  22.         color: rgb(0,0,0);
  23.      }
  24.      a:hover{
  25.         cursor: pointer;
  26.         color:blanchedalmond;
  27.      }
  28.      .new-courses{
  29.         width: 1200px;
  30.         margin: 130px auto;
  31.         display: grid;
  32.         grid-template-columns: 30px 530px;
  33.      }
  34.      .top{
  35.         width: 1198px;
  36.         height: 30px;
  37.         display: grid;
  38.         grid-template-columns: 150px 100px;
  39.         place-content: space-between;
  40.         /* margin-left: 30px; */
  41.         place-items: center;
  42.      }
  43.     .top h3{
  44.         font-size: 20px;
  45.         line-height: 20px;
  46.         /* margin-left: 30px; */
  47.     }
  48.     .top a{
  49.         width: 70px;
  50.         height:25px;
  51.         line-height: 25px;
  52.         font-size: 14px;
  53.         text-align: center;
  54.         place-self: end;
  55.         margin-right: 15px;
  56.         background-color: whitesmoke;
  57.     }
  58.     .top a:hover{
  59.         background-color: lightcoral;
  60.         color: white;
  61.         border-radius: 15px;
  62.     }
  63.         /* 课程内容grid，2行5列 */
  64.     .courses > .list {
  65.         width: 1180px;
  66.         display: grid;
  67.         grid-template-columns: repeat(5,220px);
  68.         grid-template-rows: repeat(2,280px);
  69.         place-content: space-between;
  70.         margin-top: 60px;
  71.     } 
  72.     /*  一个课程grid，2行1列 */
  73.     .courses > .list > .item {
  74.         display: grid;
  75.         grid-template-rows: 150px 100px;
  76.     }
  77.     .courses > .list > .item a{
  78.         width: 220px;
  79.         overflow: hidden;
  80.         border-radius: 15px 15px 0 0;
  81.     }
  82.     .courses > .list > .item a:hover{
  83.         color: red;
  84.     }
  85.     .courses > .list > .item a img{
  86.         width: 220px;
  87.         height: 150px;
  88.         transition: all 0.5s;
  89.     }
  90.     .courses > .list > .item a img:hover{
  91.         width: 220px;
  92.         overflow: hidden;
  93.         transform: scale(1.1);
  94.     }
  95.     /* 文字内容grid，2行1列  */
  96.     .courses > .list > .item > .detail{
  97.         display: grid;
  98.         grid-template-rows: 60px 40px;
  99.         font-size: 14px;
  100.         place-items: center;
  101.         border-radius: 0 0 15px 15px;
  102.         background-color: white;
  103.     }
  104.     .courses > .list > .item > .detail > .title > .level{
  105.         padding:0 10px;
  106.         background-color: #E0E8FC;
  107.         color:#298AFD;
  108.     }
  109.     .courses > .list > .item > .detail > .title > .level.add{
  110.         padding:0 10px;
  111.         background-color: #ef9fc7a4;
  112.         color:#fd2942;
  113.     }
  114.     .courses > .list > .item > .detail > .title {
  115.         place-self: end;
  116.         padding: 0 25px;
  117.     }
  118.     /* grid，1行2列  */
  119.     .courses > .list > .item > .detail > .desc{
  120.         display: grid;
  121.         grid-template-columns: 100px 100px;
  122.         font-size: 10px;
  123.     }
  124.     .courses > .list > .item > .detail > .desc span{
  125.         padding-left: 20px;
  126.         color:gray
  127.     }
  128.     .courses > .list > .item > .detail > .desc span:last-child{
  129.         padding-right: 20px;
  130.         place-self: end;
  131.     } 
  132.     </style>
  133.   </head>
  134.   <body>
  135.     <!-- 整体可看成1行2行 -->
  136.     <div class="new-courses">
  137.         <div class="top">
  138.             <h3>最新课程</h3>
  139.             <a href="">更多 ></a>
  140.         </div>
  141.         <div class="courses">
  143.             <ul class="list">
  144.                 <!--1个课程开始-->
  145.                 <li class="item">
  146.                   <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  147.                   <div class="detail">
  148.                       <div class="title">
  149.                           <span class="level">初级</span>
  150.                           <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  151.                       </div>
  152.                       <div class="desc">
  153.                           <span>1234次学习</span>
  154.                           <span>收藏</span>
  155.                       </div>
  156.                   </div>
  157.                 </li>
  158.                 <li class="item">
  159.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  160.                     <div class="detail">
  161.                         <div class="title">
  162.                             <span class="level">初级</span>
  163.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  164.                         </div>
  165.                         <div class="desc">
  166.                             <span>1234次学习</span>
  167.                             <span>收藏</span>
  168.                         </div>
  169.                     </div>
  170.                   </li>
  171.                   <li class="item">
  172.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  173.                     <div class="detail">
  174.                         <div class="title">
  175.                             <span class="level add">中级</span>
  176.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  177.                         </div>
  178.                         <div class="desc">
  179.                             <span>1234次学习</span>
  180.                             <span>收藏</span>
  181.                         </div>
  182.                     </div>
  183.                   </li>
  184.                   <li class="item">
  185.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  186.                     <div class="detail">
  187.                         <div class="title">
  188.                             <span class="level">初级</span>
  189.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  190.                         </div>
  191.                         <div class="desc">
  192.                             <span>1234次学习</span>
  193.                             <span>收藏</span>
  194.                         </div>
  195.                     </div>
  196.                   </li> 
  197.                   <li class="item">
  198.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  199.                     <div class="detail">
  200.                         <div class="title">
  201.                             <span class="level">初级</span>
  202.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  203.                         </div>
  204.                         <div class="desc">
  205.                             <span>1234次学习</span>
  206.                             <span>收藏</span>
  207.                         </div>
  208.                     </div>
  209.                   </li> <li class="item">
  210.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  211.                     <div class="detail">
  212.                         <div class="title">
  213.                             <span class="level">初级</span>
  214.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  215.                         </div>
  216.                         <div class="desc">
  217.                             <span>1234次学习</span>
  218.                             <span>收藏</span>
  219.                         </div>
  220.                     </div>
  221.                   </li> <li class="item">
  222.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  223.                     <div class="detail">
  224.                         <div class="title">
  225.                             <span class="level">初级</span>
  226.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  227.                         </div>
  228.                         <div class="desc">
  229.                             <span>1234次学习</span>
  230.                             <span>收藏</span>
  231.                         </div>
  232.                     </div>
  233.                   </li> <li class="item">
  234.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  235.                     <div class="detail">
  236.                         <div class="title">
  237.                             <span class="level">初级</span>
  238.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  239.                         </div>
  240.                         <div class="desc">
  241.                             <span>1234次学习</span>
  242.                             <span>收藏</span>
  243.                         </div>
  244.                     </div>
  245.                   </li> <li class="item">
  246.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  247.                     <div class="detail">
  248.                         <div class="title">
  249.                             <span class="level">初级</span>
  250.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  251.                         </div>
  252.                         <div class="desc">
  253.                             <span>1234次学习</span>
  254.                             <span>收藏</span>
  255.                         </div>
  256.                     </div>
  257.                   </li> 
  258.                   <li class="item">
  259.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  260.                     <div class="detail">
  261.                         <div class="title">
  262.                             <span class="level add">中级</span>
  263.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  264.                         </div>
  265.                         <div class="desc">
  266.                             <span>1234次学习</span>
  267.                             <span>收藏</span>
  268.                         </div>
  269.                     </div>
  270.                   </li>
  271.                 <!--1个课程结束-->
  272.             </ul>
  273.         </div>
  274.     </div>
  275.   </body>
  276. </html>
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