search

博客列表 >grid布局实现php中文网课程栏目目录(几乎100%还原了)

grid布局实现php中文网课程栏目目录(几乎100%还原了)

lilove的博客
lilove的博客原创
2020年06月29日 22:23:46796浏览

废话不多说了，直接上代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：grid布局案例（仿php中文网首页局部页面）</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       padding: 0;
  11.       margin: 0;
  12.       box-sizing: border-box;
  13.     }
  15.     body {
  16.       background-color: #edeff1;
  17.     }
  19.     a {
  20.       color: #4d555d;
  21.       text-decoration: none;
  22.     }
  24.     .panel {
  25.       width: 1200px;
  26.       background-color: #fff;
  27.       border-radius: 10px;
  28.       padding: 20px;
  29.       margin: 10px auto;
  30.     }
  32.     .panel-header {
  33.       color: #4d555d;
  34.       margin-bottom: 30px;
  35.       text-align: center;
  36.     }
  38.     .panel-header strong {
  39.       font-size: medium;
  40.       color: #1e9fff;
  41.     }
  43.     .panel-body {
  44.       display: grid;
  45.       /* 指定容器的行数列数 */
  46.       /* 简写 */
  47.       grid-template-rows: repeat(3, 170px);
  48.       grid-template-columns: repeat(5, 217px);
  49.       /* 行列间隔 */
  50.       /* 简写 */
  51.       gap: 20px;
  52.     }
  54.     .panel-body > .item:first-of-type {
  55.       /* 第一个项目所跨的单元格区域 */
  56.       /* 简写 */
  57.       grid-row: 1 / 3;
  58.       grid-column: 1 / 2;
  59.     }
  61.     .panel-body > .item:not(:first-of-type) {
  62.       border-radius: 10px;
  63.       box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  64.     }
  66.     .panel-body > .item:not(:first-of-type) img {
  67.       border-radius: 10px 10px 0 0;
  68.     }
  70.     .panel-body > .item img {
  71.       width: 217px;
  72.       border-radius: 10px;
  73.     }
  75.     .panel-body > .item > a {
  76.       width: 217px;
  77.       height: 172px;
  78.       border-radius: 10px;
  79.       display: flex;
  80.       flex-flow: column nowrap;
  81.       position: relative;
  82.     }
  84.     .panel-body > .item > a > div {
  85.       height: 84px;
  86.       background-color: #fff;
  87.       border-radius: 10px;
  88.       display: flex;
  89.       flex-direction: column;
  90.       position: absolute;
  91.       bottom: 0;
  92.       /* 过渡效果包含的属性如果不定义，效果无效 */
  93.       transition: height 500ms;
  94.       /* Safari */
  95.       -webkit-transition: height 500ms;
  96.     }
  98.     .panel-body > .item > a:hover > div {
  99.       height: 144px;
  100.     }
  102.     .panel-body > .item > a > div > h3,
  103.     .panel-body > .item > a > p {
  104.       width: 217px;
  105.     }
  107.     .panel-body > .item > a > div > h3 {
  108.       height: 30px;
  109.       color: #07111b;
  110.       font-size: 14px;
  111.       font-weight: 400;
  112.       padding: 20px;
  113.     }
  115.     .panel-body > .item > a > div > h3 > span {
  116.       font-size: 12px;
  117.       color: #fff;
  118.       background-color: #93999f;
  119.       margin-right: 5px;
  120.     }
  122.     .panel-body > .item > a > p {
  123.       height: 45px;
  124.       font-size: 10px;
  125.       color: #afa6c7;
  126.       background-color: #fff;
  127.       border-radius: 0 0 10px 10px;
  128.       padding: 10px 20px;
  129.       position: absolute;
  130.       bottom: 0;
  131.     }
  133.     .panel-body > .item > a > div > small {
  134.       width: 177px;
  135.       font-size: 12px;
  136.       margin: 20px auto;
  137.       overflow: hidden;
  138.     }
  139.   </style>
  141.   <body>
  142.     <div class="panel">
  143.       <h3 class="panel-header">
  144.         <strong>&lt;/&gt;</strong>
  145.         php入门精品课程
  146.         <strong>&lt;/&gt;</strong>
  147.       </h3>
  148.       <div class="panel-body">
  149.         <div class="item">
  150.           <img src="images/index_learn_first.jpg" alt="" />
  151.         </div>
  152.         <div class="item">
  153.           <a href="">
  154.             <img src="images/5b63c72c61569244.png" alt="" />
  155.             <div>
  156.               <h3><span>初级</span>编程学习方法分享直播公益课</h3>
  157.             </div>
  158.             <p>1W+次播放</p>
  159.           </a>
  160.         </div>
  161.         <div class="item">
  162.           <a href="">
  163.             <img src="images/5aa23f0ded921649.jpg" alt="" />
  164.             <div>
  165.               <h3><span>初级</span>2018前端入门_HTML5</h3>
  166.             </div>
  167.             <p>18W+次播放</p>
  168.           </a>
  169.         </div>
  170.         <div class="item">
  171.           <a href="">
  172.             <img src="images/5ab346fc62ce4221.jpg" alt="" />
  173.             <div>
  174.               <h3><span>初级</span>CSS视频教程_玉女心经版</h3>
  175.               <small>
  176.                 本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。
  177.               </small>
  178.             </div>
  179.             <p>10W+次播放</p>
  180.           </a>
  181.         </div>
  182.         <div class="item">
  183.           <a href="">
  184.             <img src="images/5acc118f11d6b969.jpeg" alt="" />
  185.             <div>
  186.               <h3><span>初级</span>JavaScript极速入门_玉女心经系列</h3>
  187.             </div>
  188.             <p>18W+次播放</p>
  189.           </a>
  190.         </div>
  191.         <div class="item">
  192.           <a href="">
  193.             <img src="images/5d1c6e0d2b744633.jpg" alt="" />
  194.             <div>
  195.               <h3><span>中级</span>独孤九贱(6)_jQuery视频教程</h3>
  196.             </div>
  197.             <p>12W+次播放</p>
  198.           </a>
  199.         </div>
  200.         <div class="item">
  201.           <a href="">
  202.             <img src="images/5a9fb97057b15707.jpeg" alt="" />
  203.             <div>
  204.               <h3><span>初级</span>30分钟学会网站布局</h3>
  205.             </div>
  206.             <p>6W+次播放</p>
  207.           </a>
  208.         </div>
  209.         <div class="item">
  210.           <a href="">
  211.             <img src="images/5d24019911a24370.jpg" alt="" />
  212.             <div>
  213.               <h3><span>初级</span>[公益直播]Web前端开发极速入门</h3>
  214.             </div>
  215.             <p>5W+次播放</p>
  216.           </a>
  217.         </div>
  218.         <div class="item">
  219.           <a href="">
  220.             <img src="images/5a699f1b2da2b398.jpg" alt="" />
  221.             <div>
  222.               <h3><span>初级</span>phpStudy极速入门视频教程</h3>
  223.             </div>
  224.             <p>40W+次播放</p>
  225.           </a>
  226.         </div>
  227.         <div class="item">
  228.           <a href="">
  229.             <img src="images/5cecd27a4348b582.jpg" alt="" />
  230.             <div>
  231.               <h3><span>中级</span>ThinkPHP6.0极速入门(视频教程)</h3>
  232.             </div>
  233.             <p>4W+次播放</p>
  234.           </a>
  235.         </div>
  236.         <div class="item">
  237.           <a href="">
  238.             <img src="images/5d1c6dfc9eb09885.jpg" alt="" />
  239.             <div>
  240.               <h3><span>中级</span>独孤九贱(4)_PHP视频教程</h3>
  241.             </div>
  242.             <p>50W+次播放</p>
  243.           </a>
  244.         </div>
  245.         <div class="item">
  246.           <a href="">
  247.             <img src="images/5a13c87351613730.jpg" alt="" />
  248.             <div>
  249.               <h3><span>初级</span>php完全自学手册</h3>
  250.             </div>
  251.             <p>20W+次播放</p>
  252.           </a>
  253.         </div>
  254.         <div class="item">
  255.           <a href="">
  256.             <img src="images/5b19ef2990649817.jpg" alt="" />
  257.             <div>
  258.               <h3><span>初级</span>MySQL权威开发指南（教程）</h3>
  259.             </div>
  260.             <p>2W+次播放</p>
  261.           </a>
  262.         </div>
  263.         <div class="item">
  264.           <a href="">
  265.             <img src="images/5d240300be85b731.jpg" alt="" />
  266.             <div>
  267.               <h3><span>中级</span>[公益直播]PHP实战开发极速入门</h3>
  268.             </div>
  269.             <p>3W+次播放</p>
  270.           </a>
  271.         </div>
  272.       </div>
  273.     </div>
  274.   </body>
  275. </html>
  • 运行效果：

不得不感叹grid布局的强大。

总结：

  1. 此案例中用到了grid与flex的嵌套，解决了以前很难解决的位置对齐和定位问题；
  2. 案例中有个运用over-flow: hidden;隐藏文字的技巧；
  3. 加入了过渡效果transition；
上一条：flex弹性盒子学习三：仿站实战下一条：网格布局实现课程信息
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多