search

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

仿PHP中文网grid布局

amin
amin原创
2020年06月29日 16:06:39643浏览

  • 代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>仿PHP中文网grid布局</title>
  9.     <style>
  10.         * {
  11.             border: 0;
  12.             margin: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         a {
  17.             text-decoration: none;
  18.             color: #111;
  19.         }
  21.         li {
  22.             list-style: none;
  23.         }
  25.         header > ul {
  26.             display: flex;
  27.             width: 100%;
  28.             height: 60px;
  29.             line-height: 60px;
  30.             background: #000;
  31.         }
  33.         header > ul > li:nth-of-type(3) {
  34.             background: #363c41;
  35.         }
  37.         header > ul > li > a {
  38.             color: rgba(255, 255, 255, 0.7);
  39.             padding: 0 30px;
  40.         }
  41.         header > ul > li > a:hover{
  42.             color: rgba(255, 255, 255, 1);
  43.             box-shadow: #4CAF50 0px 6px 0;
  44.             padding: 14px 30px;
  45.             transition: all .1s;
  46.         }
  48.         header > ul > li:first-of-type {
  49.             width: 140px;
  50.         }
  52.         header > ul > li:first-of-type > a {
  53.             padding: 0;
  54.         }
  56.         header > ul > li:first-of-type > a > img {
  57.             width: 100%;
  58.             margin-top: -4px;
  59.         }
  61.         header > ul > li:last-of-type {
  62.             margin-left: auto;
  63.         }
  65.         header > ul > li:last-of-type > a > img {
  66.             width: 28px;
  67.             vertical-align: middle;
  68.             border-radius: 100%;
  69.         }
  71.         .container {
  72.             display: grid;
  73.             grid-template-columns: repeat(5, 1fr);
  74.             grid-template-rows: repeat(3, auto);
  75.             grid-column-gap: 20px;
  76.             grid-row-gap: 20px;
  78.             width: 1165px;
  79.             margin: 40px auto;
  80.         }
  82.         .container > .item {
  83.             position: relative;
  84.             overflow: hidden;
  85.             width: 217px;
  86.             height: 172px;
  87.             border-radius: 8px;
  88.             box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  89.         }
  91.         .container > .item:first-of-type {
  92.             grid-column-end: 2;
  93.             grid-row-end: span 2;
  94.             height: 360px;
  95.             box-shadow: none;
  96.         }
  98.         .container > .item > a > img {
  99.             width: 100%;
  100.             border-radius: 8px;
  101.         }
  103.         .container > .item > a > div:first-of-type {
  104.             position: absolute;
  105.             top: 95px;
  106.             background: #fff;
  107.             border-radius: 8px 8px 0 0;
  108.             padding: 16px 20px 0;
  109.             transition: .6s;
  110.         }
  112.         .container > .item > a:hover > div:first-of-type {
  113.             /*top:27px;*/
  114.             transform: translateY(-68px);
  115.             transition: .6s;
  116.         }
  118.         .container > .item > a > div:first-of-type h3 {
  119.             font-size: 14px;
  120.             font-weight: 400;
  121.             max-height: 40px;
  122.             overflow: hidden;
  123.             line-height: 21px;
  124.         }
  126.         .container > .item > a > div:first-of-type h3 i {
  127.             margin-right: 4px;
  128.             padding: 2px;
  129.             font-style: normal;
  130.             font-size: 12px;
  131.             color: #fff;
  132.             border-radius: 1px;
  133.             background-color: #93999f;
  134.         }
  136.         .container > .item > a > div:first-of-type p {
  137.             color: #93999f;
  138.             font-size: 12px;
  139.             height: 40px;
  140.             overflow: hidden;
  141.             line-height: 20px;
  142.             margin-top: 6px;
  143.         }
  145.         .container > .item > a > div:last-of-type {
  146.             position: absolute;
  147.             bottom: 0;
  148.             width: 100%;
  149.             height: 42px;
  150.             line-height: 42px;
  151.             padding: 0 20px;
  152.             background: #fff;
  153.             color: #93999f;
  154.             font-size: 12px;
  155.         }
  156.     </style>
  157. </head>
  158. <body>
  159. <header>
  160.     <ul>
  161.         <li><a href=""><img src="./images/logo.png" alt=""></a></li>
  162.         <li><a href="">首页</a></li>
  163.         <li><a href="">视频教程</a></li>
  164.         <li><a href="">入门教程</a></li>
  165.         <li><a href="">社区问答</a></li>
  166.         <li><a href="">技术文章</a></li>
  167.         <li><a href="">资源下载</a></li>
  168.         <li><a href="">php培训</a></li>
  169.         <li><a href=""><img src="./images/user_avatar.jpg" alt=""></a></li>
  170.     </ul>
  171. </header>
  172. <div class="container">
  173.     <div class="item">
  174.         <a href=""><img src="./images/0628%20(10).jpg" alt=""></a>
  175.     </div>
  176.     <div class="item">
  177.         <a href=""><img src="./images/0628%20(1).jpg" alt="">
  178.             <div class="php-course-intro">
  179.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  180.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  181.             </div>
  182.             <div class="php-course-bottom">903598次学习</div>
  183.         </a>
  184.     </div>
  185.     <div class="item">
  186.         <a href=""><img src="./images/0628%20(2).jpg" alt="">
  187.             <div class="php-course-intro">
  188.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  189.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  190.             </div>
  191.             <div class="php-course-bottom">903598次学习</div>
  192.         </a>
  193.     </div>
  194.     <div class="item">
  195.         <a href=""><img src="./images/0628%20(3).jpg" alt="">
  196.             <div class="php-course-intro">
  197.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  198.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  199.             </div>
  200.             <div class="php-course-bottom">903598次学习</div>
  201.         </a>
  202.     </div>
  203.     <div class="item">
  204.         <a href=""><img src="./images/0628%20(4).jpg" alt="">
  205.             <div class="php-course-intro">
  206.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  207.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  208.             </div>
  209.             <div class="php-course-bottom">903598次学习</div>
  210.         </a>
  211.     </div>
  212.     <div class="item">
  213.         <a href=""><img src="./images/0628%20(5).jpg" alt="">
  214.             <div class="php-course-intro">
  215.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  216.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  217.             </div>
  218.             <div class="php-course-bottom">903598次学习</div>
  219.         </a>
  220.     </div>
  221.     <div class="item">
  222.         <a href=""><img src="./images/0628%20(6).jpg" alt="">
  223.             <div class="php-course-intro">
  224.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  225.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  226.             </div>
  227.             <div class="php-course-bottom">903598次学习</div>
  228.         </a>
  229.     </div>
  230.     <div class="item">
  231.         <a href=""><img src="./images/0628%20(7).jpg" alt="">
  232.             <div class="php-course-intro">
  233.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  234.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  235.             </div>
  236.             <div class="php-course-bottom">903598次学习</div>
  237.         </a>
  238.     </div>
  239.     <div class="item">
  240.         <a href=""><img src="./images/0628%20(8).jpg" alt="">
  241.             <div class="php-course-intro">
  242.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  243.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  244.             </div>
  245.             <div class="php-course-bottom">903598次学习</div>
  246.         </a>
  247.     </div>
  248.     <div class="item">
  249.         <a href=""><img src="./images/0628%20(9).jpg" alt="">
  250.             <div class="php-course-intro">
  251.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  252.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  253.             </div>
  254.             <div class="php-course-bottom">903598次学习</div>
  255.         </a>
  256.     </div>
  257.     <div class="item">
  258.         <a href=""><img src="./images/0628%20(11).jpg" alt="">
  259.             <div class="php-course-intro">
  260.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  261.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  262.             </div>
  263.             <div class="php-course-bottom">903598次学习</div>
  264.         </a>
  265.     </div>
  266.     <div class="item">
  267.         <a href=""><img src="./images/0628%20(2).jpg" alt="">
  268.             <div class="php-course-intro">
  269.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  270.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  271.             </div>
  272.             <div class="php-course-bottom">903598次学习</div>
  273.         </a>
  274.     </div>
  275.     <div class="item">
  276.         <a href=""><img src="./images/0628%20(3).jpg" alt="">
  277.             <div class="php-course-intro">
  278.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  279.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  280.             </div>
  281.             <div class="php-course-bottom">903598次学习</div>
  282.         </a>
  283.     </div>
  284.     <div class="item">
  285.         <a href=""><img src="./images/0628%20(4).jpg" alt="">
  286.             <div class="php-course-intro">
  287.                 <h3><i>中级</i>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</h3>
  288.                 <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！ 紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报~~</p>
  289.             </div>
  290.             <div class="php-course-bottom">903598次学习</div>
  291.         </a>
  292.     </div>
  293. </div>
  294. </body>
  295. </html>

  • 效果图

上一条：第一个作业下一条：跟我真正了解免费OA这个坑
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多