Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid(网格)布局-仿php中文网模块
Blogger Information
Blog 13
fans 0
comment 0
visits 11167
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中文网模块
忠于原味
Original
791 people have browsed it

使用Grid布局仿php中文网模块

废话不多说直接上代码：

  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.     <link rel="stylesheet" href="font/iconfont.css" />
  7.     <title>Grid(网格)布局-仿php中文网模块</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       .container {
  16.         display: grid;
  17.         width: 1200px;
  18.         /* 3行5列 */
  19.         grid-template-columns: repeat(5, 217px);
  20.         grid-template-rows: repeat(3, 176px);
  21.         gap: 20px;
  22.         margin: auto;
  23.       }
  25.       .item img {
  26.         width: 217px;
  27.         height: 124px;
  28.         border-radius: 10px;
  29.       }
  31.       .item:first-of-type {
  32.         grid-row-start: 1;
  33.         grid-row-end: 3;
  34.       }
  35.       .item:first-of-type img {
  36.         width: 217px;
  37.         height: 372px;
  38.       }
  39.       a {
  40.         text-decoration: none;
  41.       }
  42.       .item {
  43.         /* 设置相对定位 */
  44.         position: relative;
  45.       }
  46.       .font {
  47.         /* 设置绝对定位 */
  48.         position: absolute;
  49.         top: 100px;
  50.         font-size: 14px;
  51.         height: 74px;
  52.         width: 217px;
  53.         /* 边框圆角 */
  54.         border-radius: 10px;
  55.         background-color: #fff;
  56.         /* 盒子阴影 */
  57.         box-shadow: 0px 0px 10px #888888;
  58.         /* 设置鼠标悬停图标 */
  59.         cursor: pointer;
  60.       }
  62.       .font h3 {
  63.         font-size: 14px;
  64.         color: #07111b;
  65.         padding: 16px 0 6px;
  66.         margin-left: 20px;
  67.         font-weight: 400;
  68.       }
  69.       .font i {
  70.         font-size: 12px;
  71.         background-color: #93999f;
  72.         color: white;
  73.         margin: 2px 4px 0 0;
  74.         padding: 2px;
  75.       }
  76.       .font div {
  77.         color: #93999f;
  78.         font-size: 12px;
  79.         padding: 0 20px;
  80.         margin-top: 10px;
  81.       }
  82.       .header {
  83.         width: 1200px;
  84.         height: 40px;
  85.         font-size: 20px;
  86.         font-weight: bold;
  87.         color: #4d555d;
  88.         margin: 40px auto 10px;
  89.         /* 文字水平居中 */
  90.         text-align: center;
  91.       }
  92.       .font-color {
  93.         color: royalblue;
  94.         font-size: 20px;
  95.       }
  96.       /* 去掉i标签斜体 */
  97.       i {
  98.         font-style: normal;
  99.       }
  100.     </style>
  101.   </head>
  102.   <body>
  103.     <div class="header">
  104.       <i class="iconfont icon-ai-code font-color"></i>php精品入门课程<i
  105.         class="iconfont icon-ai-code font-color"
  106.       ></i>
  107.     </div>
  108.     <div class="container">
  109.       <div class="item">
  110.         <a href=""><img src="img/1.jpg" class="img-left" alt="" /></a>
  111.       </div>
  112.       <div class="item">
  113.         <a href=""
  114.           ><img src="img/2.png" alt="" />
  115.           <div class="font">
  116.             <h3><i>初级</i>编程学习方法分享直播</h3>
  117.             <div><span>1W+次播放</span></div>
  118.           </div></a
  119.         >
  120.       </div>
  121.       <div class="item">
  122.         <a href=""
  123.           ><img src="img/3.jpg" alt="" />
  124.           <div class="font">
  125.             <h3><i>初级</i>2018前端入门_HTML5</h3>
  126.             <div><span>18W+次播放</span></div>
  127.           </div></a
  128.         >
  129.       </div>
  130.       <div class="item">
  131.         <a href=""
  132.           ><img src="img/4.jpg" alt="" />
  133.           <div class="font">
  134.             <h3><i>初级</i>CSS视频教程-玉女心经</h3>
  135.             <div><span>10W+次播放</span></div>
  136.           </div></a
  137.         >
  138.       </div>
  139.       <div class="item">
  140.         <a href=""
  141.           ><img src="img/5.jpg" alt="" />
  142.           <div class="font">
  143.             <h3><i>初级</i>javaScript极速入门_玉</h3>
  144.             <div><span>18W+次播放</span></div>
  145.           </div></a
  146.         >
  147.       </div>
  148.       <div class="item">
  149.         <a href=""
  150.           ><img src="img/6.jpg" alt="" />
  151.           <div class="font">
  152.             <h3><i>中级</i>独孤九贱(6)_jQuery</h3>
  153.             <div><span>12W+次播放</span></div>
  154.           </div></a
  155.         >
  156.       </div>
  157.       <div class="item">
  158.         <a href=""
  159.           ><img src="img/7.jpeg" alt="" />
  160.           <div class="font">
  161.             <h3><i>初级</i>30分钟学会网页布局</h3>
  162.             <div><span>6W+次播放</span></div>
  163.           </div></a
  164.         >
  165.       </div>
  166.       <div class="item">
  167.         <a href=""
  168.           ><img src="img/8.jpg" alt="" />
  169.           <div class="font">
  170.             <h3><i>初级</i>[公益直播]Web前端开发</h3>
  171.             <div><span>5W+次播放</span></div>
  172.           </div></a
  173.         >
  174.       </div>
  175.       <div class="item">
  176.         <a href=""
  177.           ><img src="img/9.jpg" alt="" />
  178.           <div class="font">
  179.             <h3><i>初级</i>phpStudy极速入门视频</h3>
  180.             <div><span>40W+次播放</span></div>
  181.           </div></a
  182.         >
  183.       </div>
  184.       <div class="item">
  185.         <a href=""
  186.           ><img src="img/10.jpg" alt="" />
  187.           <div class="font">
  188.             <h3><i>中级</i>ThinkPHP6.0极速入门</h3>
  189.             <div><span>4W+次播放</span></div>
  190.           </div></a
  191.         >
  192.       </div>
  193.       <div class="item">
  194.         <a href=""
  195.           ><img src="img/11.jpg" alt="" />
  196.           <div class="font">
  197.             <h3><i>中级</i>独孤九贱(4)_PHP视频</h3>
  198.             <div><span>50W+次播放</span></div>
  199.           </div></a
  200.         >
  201.       </div>
  202.       <div class="item">
  203.         <a href=""
  204.           ><img src="img/12.jpg" alt="" />
  205.           <div class="font">
  206.             <h3><i>中级</i>php完全自学手册</h3>
  207.             <div><span>20W+次播放</span></div>
  208.           </div></a
  209.         >
  210.       </div>
  211.       <div class="item">
  212.         <a href=""
  213.           ><img src="img/13.jpg" alt="" />
  214.           <div class="font">
  215.             <h3><i>中级</i>MySQL权威开发指南</h3>
  216.             <div><span>2W+次播放</span></div>
  217.           </div></a
  218.         >
  219.       </div>
  220.       <div class="item">
  221.         <a href=""
  222.           ><img src="img/14.jpg" alt="" />
  223.           <div class="font">
  224.             <h3><i>中级</i>[公益直播]PHP实战开播</h3>
  225.             <div><span>3W+次播放</span></div>
  226.           </div></a
  227.         >
  228.       </div>
  229.     </div>
  230.   </body>
  231. </html>

效果图：

ps：这个grid网格布局用起来真是太爽了，不过属性相比FlexBox布局的属性多了不少，多去熟悉它的属性，运用它，相信大家都会进步的更快，布局起来更爽！

Correcting teacher：天蓬老师天蓬老师

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