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

博客列表 >Grid常用的容器与项目属性 仿写PHP中文网首页:最新课程片断(也可选其它片断)

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

P粉890456325
P粉890456325原创
2023年02月14日 13:44:53308浏览

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>
上一条：安装Node和相关JS插件下一条：前端课程前期准备
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多