search

博客列表 >grid布局仿PHP中文网课程列表

grid布局仿PHP中文网课程列表

知行合一
知行合一原创
2020年07月03日 10:50:50518浏览

新学Grid布局，仿制了PHP中文网的课程列表。

效果图

代码如下

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.             font-size: 14px;
  12.             color: #666;
  13.         }
  14.         a {
  16.             text-decoration: none;
  17.         }
  18.         ul {
  19.             list-style: none;
  20.         }
  21.         img {
  22.             border: none;
  23.         }
  24.         .container {
  25.             margin: 50px auto;
  26.             width: 1200px;
  27.             height: 570px;
  28.             display: grid;
  29.             grid-template-columns: repeat(5, 1fr);
  30.             grid-template-rows: repeat(3, 1fr);
  31.         }
  33.         li {
  34.             border-radius: 5%;
  35.             box-shadow: 0 0 10px #888;
  36.             position: relative;
  37.             width: 217px;
  38.             height: 166px;
  39.             place-self: start center;
  40.         }
  42.         li img {
  44.             width: 100%;
  45.             border-radius: 5%;
  46.         }
  48.         li>a {
  49.             position: absolute;
  50.             display: block;
  51.         }
  53.         .title {
  54.             position: absolute;
  55.             bottom: 30px;
  56.             left: 0;
  57.             height: 60px;
  58.             background-color: white;
  59.             padding-left: 20px;
  60.             z-index: 9;
  61.             width: 100%;
  62.             padding-top: 10px;
  63.             border-radius: 8px;
  64.         }
  66.         .title:hover {
  67.             height: 100px;
  68.             transition: height 0.7s;/*动画效果*/
  69.         }
  71.         .title span {
  72.             padding: 2px;
  73.             font-style: normal;
  74.             font-size: 12px;
  75.             color: #fff;
  76.             line-height: 12px;
  77.             border-radius: 1px;
  78.             background-color: #93999f;
  79.             display: inline-block;
  80.             margin-right: 3px;
  81.         }
  83.         .click {
  84.             position: absolute;
  85.             bottom: 0;
  86.             left: 0;
  87.             height: 30px;
  88.             padding-left: 20px;
  89.             width: 100%;
  90.         }
  93.         li:first-of-type {
  94.             grid-row: 1/span 2;
  95.             height: 362px;
  96.         }
  97.     </style>
  98. </head>
  100. <body>
  101.     <ul class="container">
  102.         <li><img src="images/gridcase/1.jpg"></li>
  103.         <li><a href=""><img src="images/gridcase/2.png"></a>
  104.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  105.             <div class="click">1W+次播放</div>
  106.         </li>
  107.         <li><a href=""><img src="images/gridcase/2.png"></a>
  108.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  109.             <div class="click">1W+次播放</div>
  110.         </li>
  111.         <li><a href=""><img src="images/gridcase/2.png"></a>
  112.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  113.             <div class="click">1W+次播放</div>
  114.         </li>
  115.         <li><a href=""><img src="images/gridcase/2.png"></a>
  116.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  117.             <div class="click">1W+次播放</div>
  118.         </li>
  119.         <li><a href=""><img src="images/gridcase/2.png"></a>
  120.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  121.             <div class="click">1W+次播放</div>
  122.         </li>
  123.         <li><a href=""><img src="images/gridcase/2.png"></a>
  124.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  125.             <div class="click">1W+次播放</div>
  126.         </li>
  127.         <li><a href=""><img src="images/gridcase/2.png"></a>
  128.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  129.             <div class="click">1W+次播放</div>
  130.         </li>
  131.         <li><a href=""><img src="images/gridcase/2.png"></a>
  132.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  133.             <div class="click">1W+次播放</div>
  134.         </li>
  135.         <li><a href=""><img src="images/gridcase/2.png"></a>
  136.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  137.             <div class="click">1W+次播放</div>
  138.         </li>
  139.         <li><a href=""><img src="images/gridcase/2.png"></a>
  140.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  141.             <div class="click">1W+次播放</div>
  142.         </li>
  143.         <li><a href=""><img src="images/gridcase/2.png"></a>
  144.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  145.             <div class="click">1W+次播放</div>
  146.         </li>
  147.         <li><a href=""><img src="images/gridcase/2.png"></a>
  148.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  149.             <div class="click">1W+次播放</div>
  150.         </li>
  151.         <li><a href=""><img src="images/gridcase/2.png"></a>
  152.             <div class="title"><span>初级</span><a href="">编程学习方法分享直播公益课</a></div>
  153.             <div class="click">1W+次播放</div>
  154.         </li>
  155.     </ul>
  156. </body>
  158. </html>

总结

gird布局是新兴布局方式，适合于多行多列布局，很强大。相关知识点很多，需要做好笔记，多加练习，才能熟记在心。

上一条：php代码的基本组成 打印变量的几种方法 获取变量的类型 变量的命名规范 变量的传递 变量的检测和删除 变量的数据类型 变量的类型转换下一条：根据子分类组装父级分类和顶级分类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多