search

博客列表 >grid布局仿照php中文网的一个模块

grid布局仿照php中文网的一个模块

努力努力再努力
努力努力再努力原创
2020年06月30日 17:12:12681浏览
仿照的结果图

仿照的代码为
  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>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0px;
  10.         padding: 0px;
  11.         box-sizing: border-box;
  12.       }
  14.       .course {
  15.         width: 1200px;
  16.         height: 647px;
  17.         margin: 10px auto;
  18.       }
  20.       /* 设置标题 */
  21.       .course > .course-title {
  22.         font-size: 1.2rem;
  23.         width: 1185px;
  24.         line-height: 30px;
  25.         text-align: center;
  26.         margin: 20px;
  27.       }
  29.       /* 设置gride布局  已将设置宽度了 直接设置高度即可*/
  30.       .course > .contariner {
  31.         height: 567px;
  32.         display: grid;
  34.         grid-template-columns: repeat(5, 1fr);
  35.         grid-template-rows: repeat(3, 1fr);
  36.       }
  38.       /* 设置每个的项目在单元格的位置以及大小 */
  39.       .course > .contariner > .course-list {
  40.         width: 217px;
  41.         height: 172px;
  42.         box-shadow: 0 0 10px #555;
  43.         /* 设置项目垂直居上 水平居中 */
  44.         place-self: start center;
  45.         border-radius: 5%;
  46.         position: relative;
  47.         /* 隐藏p标签描述的文字超出问题 */
  48.         overflow: hidden;
  49.       }
  51.       .course > .contariner > .course-list:first-of-type {
  52.         grid-row: span 2;
  53.         height: 364px;
  54.       }
  56.       .course > .contariner > .course-list img {
  57.         /* 圆角 */
  58.         width: 100%;
  59.         border-radius: 5%;
  60.       }
  62.       /* 去掉下划线 */
  63.       .course > .contariner > .course-list > a {
  64.         text-decoration: none;
  65.         cursor: pointer;
  66.       }
  68.       /* 设置播放量  添加背景是为了隐藏与播放次数之间的文字*/
  69.       .course > .contariner > .course-list .num {
  70.         position: absolute;
  71.         width: 100%;
  72.         height: 42px;
  73.         padding: 0 20px;
  74.         bottom: 0px;
  75.         color: #93999f;
  76.         font-size: 12px;
  77.         line-height: 36px;
  78.         background-color: #fff;
  79.         border-radius: 8px;
  80.       }
  82.       /* 设置图片标题 */
  83.       .course > .contariner > .course-list .desc {
  84.         height: 40px;
  85.         font-size: 12px;
  86.         color: #656;
  87.         line-height: 21px;
  88.         padding: 16px 17px 6px;
  89.         position: relative;
  90.         top: -35px;
  91.         border-radius: 8px;
  92.         background-color: #fff;
  93.       }
  95.       /* 设置过度 */
  96.       .course > .contariner > .course-list > a > .desc:hover {
  97.         height: 130px;
  98.         margin-top: -60px;
  99.         transition: 0.5s;
  100.       }
  101.       .course > .contariner > .course-list .desc span {
  102.         padding: 2px;
  103.         margin-right: 4px;
  104.         margin-top: 2px;
  105.         font-size: 12px;
  106.         color: #fff;
  107.         line-height: 12px;
  108.         border-radius: 1px;
  109.         background-color: #93999f;
  110.       }
  112.       .course > .contariner > .course-list .desc p {
  113.         margin-top: 5px;
  114.       }
  115.     </style>
  116.   </head>
  117.   <body>
  118.     <div class="course">
  119.       <div class="course-title">php入门精品课程</div>
  120.       <div class="contariner">
  121.         <div class="course-list"><img src="./images/1.jpg" alt="" /></div>
  122.         <div class="course-list">
  123.           <a href="">
  124.             <img src="./images/2.jpg" alt="" />
  125.             <div class="desc">
  126.               <h3><span>初级</span>编程学习方法分享直播公益课</h3>
  127.             </div>
  128.             <div class="num">1w+次播放</div>
  129.           </a>
  130.         </div>
  131.         <div class="course-list">
  132.           <a href="">
  133.             <img src="./images/3.jpg" alt="" />
  134.             <div class="desc">
  135.               <h3><span>初级</span>编程学习方法分享直播公益课</h3>
  136.             </div>
  137.             <div class="num">18w+次播放</div>
  138.           </a>
  139.         </div>
  140.         <div class="course-list">
  141.           <a href="">
  142.             <img src="./images/4.jpg" alt="" />
  143.             <div class="desc">
  144.               <h3><span>初级</span>CSS视频教程-玉女心经版</h3>
  145.               <p>
  146.                     本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。
  147.               </p>
  148.             </div>
  149.             <div class="num">10w+次播放</div>
  150.           </a>
  151.         </div>
  152.         <div class="course-list">
  153.           <a href="">
  154.             <img src="./images/5.jpg" alt="" />
  155.             <div class="desc">
  156.               <h3><span>初级</span>JavaScript极速入门_玉女心经系列</h3>
  157.             </div>
  158.             <div class="num">18w+次播放</div>
  159.           </a>
  160.         </div>
  161.         <div class="course-list">
  162.           <a href="">
  163.             <img src="./images/6.jpg" alt="" />
  164.             <div class="desc">
  165.               <h3><span>中级</span>独孤九贱(6)_jQuery视频教程</h3>
  166.             </div>
  167.             <div class="num">12w+次播放</div>
  168.           </a>
  169.         </div>
  170.         <div class="course-list">
  171.           <a href="">
  172.             <img src="./images/7.jpg" alt="" />
  173.             <div class="desc">
  174.               <h3><span>初级</span>30分钟学会网站布局</h3>
  175.             </div>
  176.             <div class="num">6w+次播放</div>
  177.           </a>
  178.         </div>
  179.         <div class="course-list">
  180.           <a href="">
  181.             <img src="./images/8.jpg" alt="" />
  182.             <div class="desc">
  183.               <h3><span>初级</span>[公益直播]Web前端开发极速入门</h3>
  184.             </div>
  185.             <div class="num">5w+次播放</div>
  186.           </a>
  187.         </div>
  188.         <div class="course-list">
  189.           <a href="">
  190.             <img src="./images/9.jpg" alt="" />
  191.             <div class="desc">
  192.               <h3><span>初级</span>phpStudy极速入门视频教程</h3>
  193.             </div>
  194.             <div class="num">40w+次播放</div>
  195.           </a>
  196.         </div>
  197.         <div class="course-list">
  198.           <a href="">
  199.             <img src="./images/10.jpg" alt="" />
  200.             <div class="desc">
  201.               <h3><span>中级</span>ThinkPHP6.0极速入门(视频教程)</h3>
  202.             </div>
  203.             <div class="num">4w+次播放</div>
  204.           </a>
  205.         </div>
  206.         <div class="course-list">
  207.           <a href="">
  208.             <img src="./images/11.jpg" alt="" />
  209.             <div class="desc">
  210.               <h3><span>中级</span>独孤九贱(4)_PHP视频教程</h3>
  211.             </div>
  212.             <div class="num">40w+次播放</div>
  213.           </a>
  214.         </div>
  215.         <div class="course-list">
  216.           <a href="">
  217.             <img src="./images/12.jpg" alt="" />
  218.             <div class="desc">
  219.               <h3><span>初级</span>php完全自学手册</h3>
  220.             </div>
  221.             <div class="num">20w+次播放</div>
  222.           </a>
  223.         </div>
  224.         <div class="course-list">
  225.           <a href="">
  226.             <img src="./images/13.jpg" alt="" />
  227.             <div class="desc">
  228.               <h3><span>初级</span>MySQL权威开发指南（教程）</h3>
  229.             </div>
  230.             <div class="num">2w+次播放</div>
  231.           </a>
  232.         </div>
  233.         <div class="course-list">
  234.           <a href="">
  235.             <img src="./images/14.jpg" alt="" />
  236.             <div class="desc">
  237.               <h3><span>中级</span>[公益直播]PHP实战开发极速入门</h3>
  238.             </div>
  239.             <div class="num">3w+次播放</div>
  240.           </a>
  241.         </div>
  242.       </div>
  243.     </div>
  244.   </body>
  245. </html>
上一条：grid布局实现PHP中文网课程栏目——100%还原下一条：6月28号作业之仿php中文网首页入门精品课程模块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多