search

博客列表 >Grid常用的容器、项目属性、仿写PHP中文网首页（局部）

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

生活需要加油
生活需要加油原创
2023年02月11日 00:26:40301浏览

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布局运用起来确实方便，功能更强大，老师总结后属性已经相对简单！。

上一条：nginx反向代理阿里云OSS图片显示预览下一条：Table 表格制作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多