Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 实例演示Grid常用的容器与项目属性与仿写PHP中文网首页:最新课程片断(也可选其它片断)
Blogger Information
Blog 8
fans 0
comment 0
visits 2495
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中文网首页:最新课程片断(也可选其它片断)
alexcy的学习博客
Original
275 people have browsed it

1.实例演示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. </head>
  9. <body>
  10.     <div class="wrapper">
  11.         <div class="box"></div>
  12.     </div>
  13.     <style>
  14.         .wrapper {
  15.             display: grid;
  16.             width: 500px;
  17.             height: 200px;
  19.             grid-template-columns: 150px 200px 150px;
  20.             grid-template-rows:repeat(3,1fr);
  21.         }
  22.         .box {
  23.             background-color: coral;
  24.         }
  25.         .box:first-child{
  26.             grid-area: 1 / 2 / span 2 / span 2;
  27.         }
  28.     </style>
  29. </body>
  30. </html>

效果图：

  2. <!DOCTYPE html>
  3. <html lang="zh-cn">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <div class="wrapper">
  12.         <div class="box">盒子1</div>
  13.         <div class="box">盒子2</div>
  14.         <div class="box">盒子3</div>
  15.         <div class="box">盒子4</div>
  16.         <div class="box">盒子5</div>
  17.         <div class="box">盒子6</div>
  18.         <div class="box">盒子7</div>
  19.         <div class="box">盒子8</div>
  20.         <div class="box">盒子9</div>
  22.         <div class="box add">盒子10</div>
  23.         <div class="box add">盒子11</div>
  24.     </div>
  25.     <style>
  26.         .wrapper {
  27.             display: grid;
  28.             width: 500px;
  29.             min-height: 200px;
  31.             grid-template-columns: 150px 200px 150px;
  32.             grid-template-rows:repeat(3,1fr);
  34.             grid-auto-flow: row;
  35.             grid-auto-rows: 50px;
  36.         }
  37.         .box {
  38.             background-color: coral;
  39.         }
  40.         .box.add{
  41.             background-color: pink;
  42.         }
  43.     </style>
  44. </body>
  45. </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. </head>
  9. <body>
  10.     <div class="wrapper">
  11.         <div class="box">盒子1</div>
  12.         <div class="box">盒子2</div>
  13.         <div class="box">盒子3</div>
  14.         <div class="box">盒子4</div>
  15.         <div class="box">盒子5</div>
  16.         <div class="box">盒子6</div>
  17.         <div class="box">盒子7</div>
  18.         <div class="box">盒子8</div>
  19.         <div class="box">盒子9</div>
  20.     </div>
  21.     <style>
  22.         .wrapper {
  23.             display: grid;
  24.             width: 600px;
  25.             height: 300px;
  26.             border: 1px solid #000;
  27.             background-color: lavender;
  28.             grid-template-columns: 150px 200px 150px;
  29.             grid-template-rows:repeat(3,70px);
  31.             place-content:space-around;
  33.             place-items: center;
  34.         }
  35.         .box {
  36.             background-color: coral;
  37.         }
  38.     </style>
  39. </body>
  40. </html>

效果图：

2.仿写PHP中文网首页

  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.             padding: 0;margin: 0;
  11.         }
  12.         a {
  13.             text-decoration: none;
  14.             color: #999999;
  15.             font-size: 14px;
  16.         }
  17.         body {
  18.             background-color: #f3f5f7;
  19.         }
  20.         .new {
  21.             margin: 0 auto;
  22.             display: grid;
  23.             width: 1200px;
  24.             grid-template-rows: 100px ;
  25.         }
  26.         .bd{
  27.             display: grid;
  28.             place-content:  center space-between;
  29.             grid-template-columns: 100px 100px;
  30.             place-items:center;
  32.         }
  33.         .new .bd h2{
  34.             font-weight: bold;
  35.             font-size: 22px;
  36.             color: #333;
  37.         }
  38.         .bd a{
  39.             padding: 5px 20px;
  40.             border-radius: 30px;
  41.             background-color: rgb(235, 235, 235);
  42.             opacity: .8;
  43.             transition: all .5;
  44.         }
  45.         .bd a:hover{
  46.             background-color: red;
  47.             color: #fff;
  48.         }
  49.         .hd ul{
  50.             display: grid;
  51.             grid-template-columns: 224px 224px 224px 224px 224px;
  52.             grid-template-rows: 235px 235px;
  53.             gap: 20px;
  54.         }
  55.         .hd .list .item img{
  56.             width: 224px;
  57.             height: 130px;
  58.         }
  59.         .hd ul li {
  60.             width: 224px;
  61.             background-color: #fff;
  62.             border-radius: 10px;
  63.             overflow: hidden;
  64.         }
  65.         .hd ul li .nr{
  66.             padding: 20px 10px;
  67.         }
  68.         .hd ul li .nr .title {
  69.             display: grid;
  70.             place-content: center space-between ;
  71.             grid-template-columns: 50px 1fr;
  72.             place-items: center;
  73.         }
  74.         .title a{
  75.             color: #000;
  76.         }
  77.         .hd ul li .nr .title span {
  78.             background-color:#E0E8FC;
  79.             color: #298AFD;
  80.             padding: 1px 4px;
  81.             border-radius: 2px;
  82.         }
  83.         .hd ul li .nr .desc {
  84.             display: flex;
  85.             place-content:space-between ;
  86.             grid-template-columns: 1fr 1fr;
  87.             margin-top: 25px;
  88.             font-size: 12px;
  89.             color: #b7b7b7;
  90.             padding:0 5px;
  91.         }
  92.     </style>
  93. </head>
  94. <body>
  95.     <div class="new">
  96.         <div class="bd">
  97.             <h2>最新课程</h2>
  98.             <a href="#">更多></a>
  99.         </div>
  100.         <div class="hd">
  101.             <ul class="list">
  102.                 <li class="item">
  103.                     <a href="#"><img src="pic.jpg" alt=""></a>
  104.                     <div class="nr">
  105.                         <div class="title">
  106.                             <span>初级</span>
  107.                             <a href="#">课程标题课程标题</a>
  108.                         </div>
  109.                         <div class="desc">
  110.                             <span>1234次学习</span>
  111.                             <span>收藏</span>
  112.                         </div>
  113.                     </div>
  114.                 </li>
  115.                 <li class="item">
  116.                     <a href="#"><img src="pic.jpg" alt=""></a>
  117.                     <div class="nr">
  118.                         <div class="title">
  119.                             <span>初级</span>
  120.                             <a href="#">课程标题课程标题</a>
  121.                         </div>
  122.                         <div class="desc">
  123.                             <span>1234次学习</span>
  124.                             <span>收藏</span>
  125.                         </div>
  126.                     </div>
  127.                 </li>
  128.                 <li class="item">
  129.                     <a href="#"><img src="pic.jpg" alt=""></a>
  130.                     <div class="nr">
  131.                         <div class="title">
  132.                             <span>初级</span>
  133.                             <a href="#">课程标题课程标题</a>
  134.                         </div>
  135.                         <div class="desc">
  136.                             <span>1234次学习</span>
  137.                             <span>收藏</span>
  138.                         </div>
  139.                     </div>
  140.                 </li>
  141.                 <li class="item">
  142.                     <a href="#"><img src="pic.jpg" alt=""></a>
  143.                     <div class="nr">
  144.                         <div class="title">
  145.                             <span>初级</span>
  146.                             <a href="#">课程标题课程标题</a>
  147.                         </div>
  148.                         <div class="desc">
  149.                             <span>1234次学习</span>
  150.                             <span>收藏</span>
  151.                         </div>
  152.                     </div>
  153.                 </li>
  154.                 <li class="item">
  155.                     <a href="#"><img src="pic.jpg" alt=""></a>
  156.                     <div class="nr">
  157.                         <div class="title">
  158.                             <span>初级</span>
  159.                             <a href="#">课程标题课程标题</a>
  160.                         </div>
  161.                         <div class="desc">
  162.                             <span>1234次学习</span>
  163.                             <span>收藏</span>
  164.                         </div>
  165.                     </div>
  166.                 </li>
  167.                 <li class="item">
  168.                     <a href="#"><img src="pic.jpg" alt=""></a>
  169.                     <div class="nr">
  170.                         <div class="title">
  171.                             <span>初级</span>
  172.                             <a href="#">课程标题课程标题</a>
  173.                         </div>
  174.                         <div class="desc">
  175.                             <span>1234次学习</span>
  176.                             <span>收藏</span>
  177.                         </div>
  178.                     </div>
  179.                 </li>
  180.                 <li class="item">
  181.                     <a href="#"><img src="pic.jpg" alt=""></a>
  182.                     <div class="nr">
  183.                         <div class="title">
  184.                             <span>初级</span>
  185.                             <a href="#">课程标题课程标题</a>
  186.                         </div>
  187.                         <div class="desc">
  188.                             <span>1234次学习</span>
  189.                             <span>收藏</span>
  190.                         </div>
  191.                     </div>
  192.                 </li>
  193.                 <li class="item">
  194.                     <a href="#"><img src="pic.jpg" alt=""></a>
  195.                     <div class="nr">
  196.                         <div class="title">
  197.                             <span>初级</span>
  198.                             <a href="#">课程标题课程标题</a>
  199.                         </div>
  200.                         <div class="desc">
  201.                             <span>1234次学习</span>
  202.                             <span>收藏</span>
  203.                         </div>
  204.                     </div>
  205.                 </li>
  206.                 <li class="item">
  207.                     <a href="#"><img src="pic.jpg" alt=""></a>
  208.                     <div class="nr">
  209.                         <div class="title">
  210.                             <span>初级</span>
  211.                             <a href="#">课程标题课程标题</a>
  212.                         </div>
  213.                         <div class="desc">
  214.                             <span>1234次学习</span>
  215.                             <span>收藏</span>
  216.                         </div>
  217.                     </div>
  218.                 </li>
  219.                 <li class="item">
  220.                     <a href="#"><img src="pic.jpg" alt=""></a>
  221.                     <div class="nr">
  222.                         <div class="title">
  223.                             <span>初级</span>
  224.                             <a href="#">课程标题课程标题</a>
  225.                         </div>
  226.                         <div class="desc">
  227.                             <span>1234次学习</span>
  228.                             <span>收藏</span>
  229.                         </div>
  230.                     </div>
  231.                 </li>
  232.             </ul>
  233.         </div>
  234.     </div>
  235. </body>
  236. </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