search

博客列表 >Grid(网格)布局-仿php中文网模块

Grid(网格)布局-仿php中文网模块

忠于原味
忠于原味原创
2020年06月29日 17:39:16798浏览

使用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布局的属性多了不少，多去熟悉它的属性，运用它，相信大家都会进步的更快，布局起来更爽！

上一条：Grid布局学习下一条：Grid布局php中文网九宫格用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多