简体中文（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 布局一个课程列表

grid 布局一个课程列表

JKY辉哥
JKY辉哥原创
2020年07月06日 23:52:59730浏览

1. grid 布局要实现课程列表，效果图如下

gird

2. html & css 代码结

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>0628作业：放php.cn课程列表</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         font-size: 14px;
  16.         color: #666;
  17.       }
  18.       /* 大容器 */
  19.       .courses-list {
  20.         width: 1200px;
  21.         height: 646px;
  22.         display: grid;
  23.         margin: auto;
  24.       }
  26.       /* 课程大标题 */
  27.       .courses-list > .course-title {
  28.         color: #555;
  29.         text-align: center;
  30.         height: 60px;
  31.         line-height: 60px;
  32.       }
  34.       /* 课程列表 */
  35.       .courses-list > .container {
  36.         display: grid;
  37.         grid-template-columns: repeat(5, 1fr);
  38.         grid-template-rows: repeat(3, 1fr);
  39.       }
  40.       .courses-list > .container > .course {
  41.         width: 217px;
  42.         height: 166px;
  43.         /* background-color: violet; */
  44.         border-radius: 5%;
  45.         box-shadow: 0 0 10px #888;
  46.         place-self: start center;
  47.       }
  48.       .courses-list > .container > .course.first {
  49.         grid-row: span 2;
  50.         height: 362px;
  51.       }
  52.       /* 课程图片 */
  53.       .courses-list > .container > .course img {
  54.         width: 100%;
  55.         border-radius: 5%;
  56.       }
  57.       .courses-list > .container > .course .desc {
  58.         display: grid;
  59.         place-content: space-between;
  60.         min-height: 84px;
  61.         background-color: white;
  62.         border-radius: 5%;
  63.         padding: 10px;
  64.         position: relative;
  65.         top: -42px;
  66.       }
  67.       .courses-list > .container > .course .desc span {
  68.         color: #555;
  69.         font-size: smaller;
  70.       }
  72.       .courses-list > .container > .course .desc a span {
  73.         background-color: #939999;
  74.         color: white;
  75.         padding: 1px;
  76.         border-radius: 2px;
  77.       }
  78.       .courses-list > .container > .course .desc:hover {
  79.         min-height: 130px;
  80.         position: relative;
  81.         cursor: pointer;
  82.         top: -90px;
  83.         /* 添加css过度效果 */
  84.         transition: top 0.5s;
  85.       }
  86.     </style>
  87.   </head>
  88.   <body>
  89.     <div class="courses-list">
  90.       <h3 class="course-title">PHP入门精品课程</h3>
  91.       <!-- 课程列表，用grid布局 -->
  92.       <div class="container">
  93.         <div class="course first">
  94.           <a href=""><img src="img/first.jpg" alt="" /></a>
  95.         </div>
  96.         <div class="course">
  97.           <a href=""><img src="img/img01.png" alt="" /></a>
  98.           <div class="desc">
  99.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  100.             <span>6W+播放</span>
  101.           </div>
  102.         </div>
  103.         <div class="course">
  104.           <a href=""><img src="img/img02.jpg" alt="" /></a>
  105.           <div class="desc">
  106.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  107.             <span>6W+播放</span>
  108.           </div>
  109.         </div>
  110.         <div class="course">
  111.           <a href=""><img src="img/img03.jpg" alt="" /></a>
  112.           <div class="desc">
  113.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  114.             <span>6W+播放</span>
  115.           </div>
  116.         </div>
  117.         <div class="course">
  118.           <a href=""><img src="img/img04.jpg" alt="" /></a>
  119.           <div class="desc">
  120.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  121.             <span>6W+播放</span>
  122.           </div>
  123.         </div>
  124.         <div class="course">
  125.           <a href=""><img src="img/img05.jpg" alt="" /></a>
  126.           <div class="desc">
  127.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  128.             <span>6W+播放</span>
  129.           </div>
  130.         </div>
  132.         <div class="course">
  133.           <a href=""><img src="img/img06.jpeg" alt="" /></a>
  134.           <div class="desc">
  135.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  136.             <span>6W+播放</span>
  137.           </div>
  138.         </div>
  139.         <div class="course">
  140.           <a href=""><img src="img/img07.jpg" alt="" /></a>
  141.           <div class="desc">
  142.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  143.             <span>6W+播放</span>
  144.           </div>
  145.         </div>
  146.         <div class="course">
  147.           <a href=""><img src="img/img08.jpg" alt="" /></a>
  148.           <div class="desc">
  149.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  150.             <span>6W+播放</span>
  151.           </div>
  152.         </div>
  153.         <div class="course">
  154.           <a href=""><img src="img/img09.jpg" alt="" /></a>
  155.           <div class="desc">
  156.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  157.             <span>6W+播放</span>
  158.           </div>
  159.         </div>
  160.         <div class="course">
  161.           <a href=""><img src="img/img10.jpg" alt="" /></a>
  162.           <div class="desc">
  163.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  164.             <span>6W+播放</span>
  165.           </div>
  166.         </div>
  168.         <div class="course">
  169.           <a href=""><img src="img/img11.jpg" alt="" /></a>
  170.           <div class="desc">
  171.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  172.             <span>6W+播放</span>
  173.           </div>
  174.         </div>
  175.         <div class="course">
  176.           <a href=""><img src="img/img12.jpg" alt="" /></a>
  177.           <div class="desc">
  178.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  179.             <span>6W+播放</span>
  180.           </div>
  181.         </div>
  183.         <div class="course">
  184.           <a href=""><img src="img/img13.jpg" alt="" /></a>
  185.           <div class="desc">
  186.             <a href=""><span>30分钟</span>学会布局网站布局</a>
  187.             <span>6W+播放</span>
  188.           </div>
  189.         </div>
  190.       </div>
  191.     </div>
  192.   </body>
  193. </html>

运行效果图courses

3. 总结

  • 3.1 基本术语
    • 容器: 使用网格布局的元素
    • 项目: 容器中的子元素
    • 网格线: 将容器划分为行与列的直线
    • 显式网络: 由用户根据项目数量指示容器生成的网格
    • 隐式网格: 由容器根据项目数量自动生成的网格
    • 单元格: 项目放置的具体空间
    • 网格区域: 一个以上的单元格组成的矩形区域

  • 3.2 常用属性

    1.   /** 定义网格布局 ** /
    2.   display: grid;
    4.   /*设置5列*/
    5.   grid-template-columns: 100px 100px 100px 100px 100px;
    7.   /*简写 */
    8.   grid-template-columns: repeat(5, 100px);
    10.   / *设置3行 */
    11.   grid-template-rows: 100px 100px 100px;
    13.   /*简写*/
    14.   grid-template-rows: repeat(3, 100px);
  1.     .container > .item:first-of-type {
  2.     background-color: lightcoral;
  3.     /*
  4.     grid-column-start: 1;
  5.     grid-column-end: 2;
  6.     grid-row-start: 1;
  7.     grid-row-end: 2; */
  9.     /* grid-column-start: 3;
  10.     grid-column-end: 4;
  11.     grid-row-start: 2;
  12.     grid-row-end: 3; */
  14.     /* 默认总是跨一行或一列 */
  15.     /* grid-column-start: 3;
  16.     grid-row-start: 2; */
  18.     /* 将项目放置到一个网格区域中，网格区域只能是矩形区域 */
  19.     /* grid-column-start: 2;
  20.     grid-column-end: 4;
  21.     grid-row-start: 2;
  22.     grid-row-end: 4; */
  24.     /* 行与列的跨越 */
  25.     /* grid-column-start: 2;
  26.     grid-column-end: span 2;
  27.     grid-row-start: 2;
  28.     grid-row-end: span 2; */
  30.     /* 简化 */
  31.     /* grid-column: 起始列号 / 结束列号;
  32.     grid-row: 起始行号 / 结束行号 */
  33.     /* grid-column: 2 / 4;
  34.     grid-row: 2 / 4; */
  36.     /* 跨越行和列简写 */
  37.     /* grid-column: 2 / 4;
  38.     grid-row: 2 / span 2; */
  40.     /* 跨越整行 */
  41.     /* grid-column: 1 / 4; */
  42.     /* grid-column: 1 / span 3; */
  44.     /* grid-column: 2 / 4; */
  45.     /* grid-column: -1 / -3; */
  47.     /* 充满整个容器 */
  48.     /* grid-column: 1 / span 3;
  49.     grid-row: 1 / span 3; */
  51.     /* 根据项目的当前默认位置进行简化 */
  52.     /* grid-column: span 3;
  53.     grid-row: span 3; */
  55.     /* 想写得更加的直观 */
  56.     /* grid-column-start: 1; */
  57.     grid-column-end: span 3;
  58.     /* grid-row-start: 1; */
  59.     grid-row-end: span 3;
  62.     /*项目在grid容器中的对齐方案*/
  63.     /* 当容器在存在剩余空间的时候，才有意义 */
  64.     /* place-content: 垂直方向对齐方式  水平方向对齐方式; */
  65.     /* 剩余空间分配方案1: 在顶部和左侧进行分配，简单的理解为二边分配 */
  66.     /* 垂直居中， 水平居左 */
  67.     /* place-content: center start; */
  68.     /* 垂直居上， 水平居中 */
  69.     /* place-content: start center; */
  70.     /* 垂直，水平全部居中 */
  71.     /* place-content: center center; */
  72.     /* 垂直，水平全部居中 简写 */
  73.     place-content: center;
  75.     /* 剩余空间分配方案2: 在每个单元格之间进行分配 */
  76.     /* 垂直方向二端对齐， 水平分散对齐 */
  77.     place-content: space-between space-around;
  79.     /* 垂直分散对齐，水平平均对齐 */
  80.     place-content: space-around space-evenly;
  82.     /*项目在 grid 单元格中的对齐方案*/
  83.     /* place-items: 垂直对齐方式 水平对齐方式; */
  86.    /* 项目在grid单元格中的对齐方案 */
  87.     /* place-items: 垂直对齐方式 水平对齐方式; */
  88.     place-items: strech;
  89.     /* 关键字 */
  90.     /* place-items: auto;
  91.     place-items: normal; */
  93.     /* 垂直居中，水平居左 */
  94.     /* place-items: center start; */
  96.     /* 垂直，水平都居中 */
  97.     /* place-items: center center; */
  98.     place-items: center;
  100.     /* 垂直居中，水平拉伸，单元格不能定义宽度，不然看不到效果*/
  101.     place-items: center stretch;
  103.     /*项目在 grid 网格区域中的对齐方案/
  105.     /* 网格区域，就是一个或多个单元格组成的矩形空间 */
  106.     grid-template-columns: repeat(3, 1fr);
  107.     grid-template-rows: repeat(3, 1fr);
  109.     /* 单元格垂直水平居中整体对齐 */
  110.     place-items: center;
  112.     /* 设置行列间隙 */
  113.     /* row-gap: 5px;
  114.     column-gap: 5px; */
  115.     /* 行列相等 简写 */
  116.     /* gap: 5px; */
  118.     /* 行10px 列5px */
  119.     /* gap:行间距 列间距 */
  120.      gap: 10px 5px;
上一条：PHP大牛成长之路：PHP三大流程控制下一条：使用flex布局完成pc端的三列布局和移动端的布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多