search

博客列表 >实例演示Grid常用的容器与项目属性，仿写PHP中文网首页:最新课程片断

实例演示Grid常用的容器与项目属性，仿写PHP中文网首页:最新课程片断

Jet的博客
Jet的博客原创
2023年02月14日 15:59:44272浏览

一、Grid常用的容器与项目属性

1.1 显示网格与项目属性

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.     </div>
  5.     <style>
  6.         .container{
  7.             width: 300px;
  8.             height: 150px;
  9.             /*转化为grid网络容器*/
  10.             display: grid;
  12.             grid-template-columns: repeat(3,1fr);
  13.             grid-template-rows: repeat(3,1fr);
  14.         }
  16.         .container > .item{
  17.             background-color: antiquewhite;
  18.         }
  20.         .container > .item:first-child{
  21.             /*默认位置*/
  22.             /*grid-row-start: 1;
  23.             grid-row-end: 2;*/
  24.             /*简化*/
  25.             grid-row: 1 / 2;
  26.             /*grid-column-start: 1;
  27.             grid-column-end: 2;*/
  28.             grid-column: 1 / 2;
  30.             /*可以将项目移动道容器控件的任意位置上*/
  31.             /* 一个项目至少要占据一个单元格，一个单元格，默认跨越1行1列 */
  32.             /*正中间*/
  33.             /*grid-row: 2/3;
  34.             grid-column: 2/3;
  35.             /*简化：*/
  36.             /*grid-row: 2/4; /* grid-row: 2 / span 2; */
  37.             /*grid-column: 2/4;
  39.             /* 跨越多行多列可形成一个网格区域，使用以上2个属性，简化操作 */
  40.             /* grid-are: 行开始 / 列开始 / 行结束 / 列结束*/
  41.             grid-area: 2 / 2 / 4 / 4;
  42.             /*简化*/
  43.             grid-area: 2 / 2 / span2 / span2;
  45.         }
  46.     </style>

1.2 排列规则

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  12.         <div class="item">item10</div>
  13.         <div class="item">item11</div>
  14.     </div>
  16.     <style>
  17.         .container{
  18.             width: 300px;
  19.             height: 150px;
  20.             /*转化为grid网络容器*/
  21.             display: grid;
  23.             /*显示网格*/
  24.             grid-template-columns: repeat(3,1fr);
  25.             grid-template-rows: repeat(3,1fr);
  27.             /* 1、排列规则 */
  28.             /*row：行优先，默认值*/
  29.             grid-auto-flow: row;
  30.             /*grid-auto-flow: column;*/
  32.             /* 2、隐式网格 */
  33.             /* 超出显示网格数量的项目，创建在隐式网格中（自动生成）*/
  35.         }
  37.         .container > .item{
  38.             background-color: antiquewhite;
  39.         }
  42.     </style>

1.3 项目对齐

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item active">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>
  13.     <style>
  14.         .container{
  15.             width: 400px;
  16.             height: 400px;
  17.             /*转化为grid网络容器*/
  18.             display: grid;
  19.             border: 1px solid black;
  21.             /*显示网格*/
  22.             grid-template-columns: repeat(3,100px);
  23.             grid-template-rows: repeat(3,100px);
  25.             /*
  26.                 1、对齐前提：容器中必须存在“剩余空间”；
  27.                 2、对齐本质：剩余空间，在“项目”之间的分配方案；
  28.                 3、剩余空间：Flex(主轴，交叉轴)，Grid(容器，单元格)；
  29.             */
  31.             /*
  32.                 1、项目在容器中的对齐
  33.                 place-control: 垂直方向 水平方向；
  34.             */
  35.             /*居中 往右*/
  36.             place-content: center end;
  37.             /*居中*/
  38.             place-content: center;
  39.             /*剩余空间还可以在所有项目之间进行分配*/
  40.             place-content: space-between;
  42.             /* 2. 项目在"单元格"中的对齐 */
  43.             /* place-items: 垂直方向 水平方向; */
  44.             place-items: start start;
  46.         }
  48.         .container > .item { background-color: beige; width: 50px; height: 50px;}
  49.         .container > .item.active{
  50.             background-color: blueviolet;
  51.             /*某个项目，有特殊的对齐要求*/
  52.             place-self: end;
  53.         }
  55.     </style>

1.4 gap间距间隙

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>
  13.     <style>
  14.         .container{
  15.             width: 300px;
  16.             height: 300px;
  17.             padding:5px;
  18.             /*转化为grid网络容器*/
  19.             display: grid;
  20.             border: 1px solid black;
  22.             /*显示网格*/
  23.             grid-template-columns: repeat(3,1fr);
  24.             grid-template-rows: repeat(3,1fr);
  26.             /* gap：行列间隙 / 轨道间距 */
  27.             /* gap：垂直方向 水平方向*/
  28.             gap:5px 5px;
  29.         }
  31.         .container > .item{
  32.             background-color: blanchedalmond;
  33.             /* 传统 margin */
  34.             /* margin:5px; */
  35.             /* 间距会叠加 */
  36.         }
  39.     </style>

二、仿写PHP中文网首页:最新课程片断

2.1 html代码

  1.     <div class="new-courses">
  2.         <div class="top">
  3.             <h3>最新课程</h3>
  4.             <a href="">更多 ></a>
  5.         </div>
  7.         <div class="courses">
  8.             <ul class="list">
  9.                 <!--1个课程开始-->
  10.                 <li class="item">
  11.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  12.                     <div class="detail">
  13.                         <div class="title">
  14.                             <span class="level">初级</span>
  15.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  16.                         </div>
  17.                         <div class="desc">
  18.                             <span>1234次学习</span>
  19.                             <span>收藏</span>
  20.                         </div>
  21.                     </div>
  22.                 </li>
  23.                 <!--1个课程结束-->
  25.                 <!--1个课程开始-->
  26.                 <li class="item">
  27.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  28.                     <div class="detail">
  29.                         <div class="title">
  30.                             <span class="level">初级</span>
  31.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  32.                         </div>
  33.                         <div class="desc">
  34.                             <span>1234次学习</span>
  35.                             <span>收藏</span>
  36.                         </div>
  37.                     </div>
  38.                 </li>
  39.                 <!--1个课程结束-->
  41.                 <!--1个课程开始-->
  42.                 <li class="item">
  43.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  44.                     <div class="detail">
  45.                         <div class="title">
  46.                             <span class="level">初级</span>
  47.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  48.                         </div>
  49.                         <div class="desc">
  50.                             <span>1234次学习</span>
  51.                             <span>收藏</span>
  52.                         </div>
  53.                     </div>
  54.                 </li>
  55.                 <!--1个课程结束-->
  57.                 <!--1个课程开始-->
  58.                 <li class="item">
  59.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  60.                     <div class="detail">
  61.                         <div class="title">
  62.                             <span class="level">初级</span>
  63.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  64.                         </div>
  65.                         <div class="desc">
  66.                             <span>1234次学习</span>
  67.                             <span>收藏</span>
  68.                         </div>
  69.                     </div>
  70.                 </li>
  71.                 <!--1个课程结束-->
  73.                 <!--1个课程开始-->
  74.                 <li class="item">
  75.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  76.                     <div class="detail">
  77.                         <div class="title">
  78.                             <span class="level">初级</span>
  79.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  80.                         </div>
  81.                         <div class="desc">
  82.                             <span>1234次学习</span>
  83.                             <span>收藏</span>
  84.                         </div>
  85.                     </div>
  86.                 </li>
  87.                 <!--1个课程结束-->
  89.                 <!--1个课程开始-->
  90.                 <li class="item">
  91.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  92.                     <div class="detail">
  93.                         <div class="title">
  94.                             <span class="level">初级</span>
  95.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  96.                         </div>
  97.                         <div class="desc">
  98.                             <span>1234次学习</span>
  99.                             <span>收藏</span>
  100.                         </div>
  101.                     </div>
  102.                 </li>
  103.                 <!--1个课程结束-->
  105.                 <!--1个课程开始-->
  106.                 <li class="item">
  107.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  108.                     <div class="detail">
  109.                         <div class="title">
  110.                             <span class="level">初级</span>
  111.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  112.                         </div>
  113.                         <div class="desc">
  114.                             <span>1234次学习</span>
  115.                             <span>收藏</span>
  116.                         </div>
  117.                     </div>
  118.                 </li>
  119.                 <!--1个课程结束-->
  121.                 <!--1个课程开始-->
  122.                 <li class="item">
  123.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  124.                     <div class="detail">
  125.                         <div class="title">
  126.                             <span class="level">初级</span>
  127.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  128.                         </div>
  129.                         <div class="desc">
  130.                             <span>1234次学习</span>
  131.                             <span>收藏</span>
  132.                         </div>
  133.                     </div>
  134.                 </li>
  135.                 <!--1个课程结束-->
  137.                 <!--1个课程开始-->
  138.                 <li class="item">
  139.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  140.                     <div class="detail">
  141.                         <div class="title">
  142.                             <span class="level">初级</span>
  143.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  144.                         </div>
  145.                         <div class="desc">
  146.                             <span>1234次学习</span>
  147.                             <span>收藏</span>
  148.                         </div>
  149.                     </div>
  150.                 </li>
  151.                 <!--1个课程结束-->
  153.                 <!--1个课程开始-->
  154.                 <li class="item">
  155.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg"  alt=""></a>
  156.                     <div class="detail">
  157.                         <div class="title">
  158.                             <span class="level">初级</span>
  159.                             <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  160.                         </div>
  161.                         <div class="desc">
  162.                             <span>1234次学习</span>
  163.                             <span>收藏</span>
  164.                         </div>
  165.                     </div>
  166.                 </li>
  167.                 <!--1个课程结束-->
  170.             </ul>
  172.         </div>
  174.     </div>

2.2 css代码

  1. /*初始化*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. ul li {
  9.     list-style-type: none;
  10. }
  12. a {
  13.     text-decoration: none;
  14.     color: #555;
  15. }
  17. a:hover {    
  18.     cursor: pointer;
  19. }
  20. body {
  21.     background-color: #f3f5f7;
  22. }
  24. /* 整框grid，分标题和课程两个，一列两行 */
  25. .new-courses{
  26.     width: 1200px;
  27.     margin: 130px auto;
  28.     display: grid;
  29.     grid-template-rows:30px 530px;
  30. }
  32. /* 标题grid，一行两列 */
  33. .top {
  34.     width: 1198px;
  35.     height:30px;
  36.     display: grid;
  37.     grid-template-columns: 150px 100px;
  38.     place-content: space-between;
  39. }
  41. .top h3{
  42.     font-size: 20px;
  43.     line-height: 20px;
  44.     margin-left: 10px;
  45. }
  46. .top a{
  47.     width: 70px;
  48.     height:25px;
  49.     line-height: 25px;
  50.     font-size: 14px;
  51.     text-align: center;
  52.     place-self: end;
  53.     margin-right: 15px;
  54. }
  55. .top a:hover{
  56.     background-color: lightcoral;
  57.     color: white;
  58.     border-radius: 15px;
  59. }
  61. /* 课程内容grid，2行5列 */
  62. .courses > .list {
  63.     width: 1180px;
  64.     display: grid;
  65.     grid-template-columns: repeat(5,220px);
  66.     grid-template-rows: repeat(2,280px);
  67.     place-content: space-between;
  68.     margin: 10px;
  69. }
  71. /* 一个课程grid，2行1列 */
  72. .courses > .list > .item {
  73.     display: grid;
  74.     grid-template-rows: 150px 100px;
  75. }
  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. }
  96. /* 文字内容grid，2行1列 */
  97. .courses > .list > .item > .detail{
  98.     display: grid;
  99.     grid-template-rows: 60px 40px;
  100.     font-size: 14px;
  101.     place-items: center;
  102.     border-radius: 0 0 15px 15px;
  103.     background-color: white;
  104. }
  106. .courses > .list > .item > .detail > .title > .level{
  107.     padding:0 10px;
  108.     background-color: #E0E8FC;
  109.     color:#298AFD;
  110. }
  111. .courses > .list > .item > .detail > .title {
  112.     place-self: end;
  113.     padding: 0 25px;
  114. }
  116. /* grid，1行2列 */
  117. .courses > .list > .item > .detail > .desc{
  118.     display: grid;
  119.     grid-template-columns: 100px 100px;
  120.     font-size: 10px;
  121. }
  122. .courses > .list > .item > .detail > .desc span{
  123.     padding-left: 20px;
  124.     color:gray
  125. }
  126. .courses > .list > .item > .detail > .desc span:last-child{
  127.     padding-right: 20px;
  128.     place-self: end;
  129. }

2.3 示例图：

总结：

1、grid容器，可以使项目成为多个单元格（用户不可见）

2、使用方法：display:grid

3、grid一些属性：

  1. `grid-template-row/columns`: 创建显式网格
  2. `gap`: 行列间隙
  3. `place-content`: 项目在`容器`中的排列方式
  4. `place-items`: 项目在`单元格`中的排列方式
  5. `grid-row/column`: 某项目占据的网格区域
  6. `place-self`: 某项目在单元格中的排列方式
上一条：1. 写出html文档结构,并解释每个成员的功能与作用 2. ![2.演示布局元素,重点是 tag+class 3. 演示图文的语义化解决方案 4. 演示图像,链接与列表元素下一条：参考课件中的练习目录,仿写页脚与主体 与思考移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多