search

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

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

alexcy的学习博客
alexcy的学习博客原创
2023年02月10日 17:22:22271浏览

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>

效果图：

上一条：仿写PHP中文网首页:最新课程下一条：表格元素的标签实践
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多