Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php中文网课程模块grid布局
Blogger Information
Blog 16
fans 2
comment 0
visits 20106
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
仿php中文网课程模块grid布局
肖傲的博客
Original
625 people have browsed it
  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.     <title>php入门精品课程布局</title>
  7.     <style>
  8.       * {
  9.         /* 样式初始化 */
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.       }
  17.       .course {
  18.         width: 1200px;
  19.         height: 660px;
  20.         margin: auto;
  21.         border-radius: 10px;
  22.         box-shadow: 0 0 5px #888888;
  23.         background-color: #fff;
  24.       }
  25.       .title {
  26.         display: flex;
  27.         height: 80px;
  28.         justify-content: center;
  29.         align-items: center;
  30.       }
  31.       .title > h3 {
  32.         font-size: 20px;
  33.         color: #4d555d;
  34.       }
  36.       .container {
  37.         width: 1180px;
  38.         height: 550px;
  39.         margin: auto;
  40.         display: grid;
  41.         grid-template-columns: repeat(5, 1fr);
  42.         grid-template-rows: repeat(3, 1fr);
  43.         gap: 20px;
  44.       }
  45.       /* 设置弹性容器 垂直 不换行  */
  46.       .container .item:not(:first-of-type) {
  47.         display: flex;
  48.         flex-flow: column nowrap;
  49.         justify-content: flex-end;
  50.       }
  51.       .container > .item {
  52.         /* border: 1px solid #000; */
  53.         width: 217px;
  54.         height: 172px;
  55.         position: relative;
  56.         box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  57.         place-content: space-between;
  58.         overflow: hidden;
  59.       }
  60.       .container > div {
  61.         border-radius: 10px;
  62.       }
  63.       .container > .item:first-of-type {
  64.         grid-row: span 2;
  65.         height: 360px;
  66.         box-shadow: none;
  67.         /* background-color: steelblue; */
  68.       }
  69.       /* 让图片缩放并靠上 */
  70.       .container > .item > img {
  71.         width: 100%;
  72.         position: absolute;
  73.         top: 0;
  74.       }
  75.       /* 用绝对定位让span靠底部定位 */
  76.       .container > .item > span:first-of-type {
  77.         font-size: 12px;
  78.         color: #93999f;
  79.         position: absolute;
  80.         bottom: 0;
  81.         width: 100%;
  82.         height: 42px;
  83.         line-height: 42px;
  84.         padding: 0 20px;
  85.         background: #fff;
  86.         /* border: 1px solid red; */
  87.       }
  88.       /* 用相对定位进行定位，并调整高度值让h3与固定的span之间重叠让多余的字隐藏 */
  89.       .container > .item > h3 {
  90.         font-size: 14px;
  91.         font-weight: 400;
  92.         position: relative;
  93.         padding: 10px 10px 0 10px;
  94.         min-height: 84px;
  95.         top: 10px;
  96.         /* overflow: hidden; */
  97.         border-radius: 5%;
  98.         background-color: #fff;
  99.         /* 减慢浮出效果 */
  100.         transition: 0.6s;
  102.         /* border: 1px solid red; */
  103.       }
  104.       .container > .item > h3 > i {
  105.         color: white;
  106.         background-color: #93999f;
  107.         font-style: normal;
  108.         font-size: 14px;
  109.       }
  110.       .container > .item > h3 > p {
  111.         font-size: 12px;
  112.         color: #93999f;
  113.         text-align: center;
  114.         height: 40px;
  115.         line-height: 20px;
  116.         padding-top: 10px;
  117.       }
  118.       .container > .item > h3:hover {
  119.         background-color: #fff;
  120.         min-height: 130px;
  121.       }
  122.     </style>
  123.   </head>
  124.   <body>
  125.     <div class="course">
  126.       <div class="title">
  127.         <span></span>
  128.         <h3>PHP入门精品课程</h3>
  129.         <span></span>
  130.       </div>
  131.       <div class="container">
  132.         <div class="item">
  133.           <img src="images/1.jpg" alt="" />
  134.         </div>
  135.         <div class="item">
  136.           <img src="images/2.png" alt="" />
  137.           <h3>
  138.             <i>初级</i>
  139.             编程学习方法分享直播公益课
  140.           </h3>
  141.           <span>1W+次播放</span>
  142.         </div>
  143.         <div class="item">
  144.           <img src="images/3.jpg" alt="" />
  145.           <h3>
  146.             <i>初级</i>
  147.             2018前端入门_HTML5
  148.           </h3>
  149.           <span>18W+次播放</span>
  150.         </div>
  151.         <div class="item">
  152.           <img src="images/4.jpg" alt="" />
  153.           <h3>
  154.             <i>初级</i>
  155.             CSS视频教程-玉女心经版
  156.             <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  157.           </h3>
  158.           <span>10W+次播放</span>
  159.         </div>
  160.         <div class="item">
  161.           <img src="images/5.jpg" alt="" />
  162.           <h3>
  163.             <i>初级</i>
  164.             JavaScript极速入门_玉女心经系列
  165.           </h3>
  166.           <span>18W+次播放</span>
  167.         </div>
  168.         <div class="item">
  169.           <img src="images/6.jpg" alt="" />
  170.           <h3>
  171.             <i>初级</i>
  172.             独孤九贱(6)_jQuery视频教程
  173.           </h3>
  174.           <span>12W+次播放</span>
  175.         </div>
  176.         <div class="item">
  177.           <img src="images/7.jpeg" alt="" />
  178.           <h3>
  179.             <i>初级</i>
  180.             30分钟学会网站布局
  181.           </h3>
  182.           <span>6W+次播放</span>
  183.         </div>
  184.         <div class="item">
  185.           <img src="images/8.jpg" alt="" />
  186.           <h3>
  187.             <i>初级</i>
  188.             [公益直播]Web前端开发极速入门]
  189.           </h3>
  190.           <span>5W+次播放</span>
  191.         </div>
  192.         <div class="item">
  193.           <img src="images/9.jpg" alt="" />
  194.           <h3>
  195.             <i>初级</i>
  196.             phpStudy极速入门视频教程
  197.           </h3>
  198.           <span>40W+次播放</span>
  199.         </div>
  200.         <div class="item">
  201.           <img src="images/10.jpg" alt="" />
  202.           <h3>
  203.             <i>中级</i>
  204.             独孤九贱(4)_PHP视频教程
  205.           </h3>
  206.           <span>4W+次播放</span>
  207.         </div>
  208.         <div class="item">
  209.           <img src="images/11.jpg" alt="" />
  210.           <h3>
  211.             <i>中级</i>
  212.             独孤九贱(4)_PHP视频教程
  213.           </h3>
  214.           <span>50W+次播放</span>
  215.         </div>
  216.         <div class="item">
  217.           <img src="images/12.jpg" alt="" />
  218.           <h3>
  219.             <i>初级</i>
  220.             php完全自学手册
  221.           </h3>
  222.           <span>20W+次播放</span>
  223.         </div>
  224.         <div class="item">
  225.           <img src="images/13.jpg" alt="" />
  226.           <h3>
  227.             <i>初级</i>
  228.             MySQL权威开发指南（教程
  229.           </h3>
  230.           <span>2W+次播放</span>
  231.         </div>
  232.         <div class="item">
  233.           <img src="images/14.jpg" alt="" />
  234.           <h3>
  235.             <i>中级</i>
  236.             [公益直播]PHP实战开发极速入门
  237.           </h3>
  238.           <span>3W+次播放</span>
  239.         </div>
  240.       </div>
  241.     </div>
  242.   </body>
  243. </html>

效果如下：

总结：grid布局能快速布局出想要的整体布局，但是完善里面的具体内容需要用的定位等其他知识，增加边框有时候能更好的去布局想要完整实现整个网页布局需要综合掌握html和css的各种知识。多学多练多思考才能不断进步。

Correcting teacher：GuanhuiGuanhui

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