Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 6月28号作业之仿php中文网首页入门精品课程模块
Blogger Information
Blog 32
fans 2
comment 0
visits 27929
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
6月28号作业之仿php中文网首页入门精品课程模块
简行
Original
543 people have browsed it

使用grid布局技术，引用阿里图标，鼠标悬停，定位等进行仿php中文网首页入门精品课程模块，如图所示

HTML代码

  1.   <body>
  2.     <div class="container">
  3.       <h3 class="title">
  4.         <span class="iconfont icon-daima"></span>php入门精品课程<span
  5.           class="iconfont icon-daima"
  6.         ></span>
  7.       </h3>
  8.       <div class="course">
  9.         <div class="item">
  10.           <img src="./images/index_learn_first.jpg" alt="" />
  11.         </div>
  13.         <div class="item">
  14.           <a href="\"
  15.             ><img src="./images/5b244.png" alt="" />
  16.             <div class="des">
  17.               <div>
  18.                 <span>初级</span><span>编程学习方法分享直播公益课</span>
  19.               </div>
  20.               <span>1W+次播放</span>
  21.             </div>
  22.           </a>
  23.         </div>
  24.         <div class="item">
  25.           <a href="\"
  26.             ><img src="./images/5a649.jpg" alt="" />
  27.             <div class="des">
  28.               <div><span>初级</span><span>2018前端入门_HTML5</span></div>
  29.               <span>18W+次播放</span>
  30.             </div>
  31.           </a>
  32.         </div>
  33.         <div class="item">
  34.           <a href="\"
  35.             ><img src="./images/5a4221.jpg" alt="" />
  36.             <div class="des">
  37.               <div><span>初级</span><span>CSS视频教程-玉女心经版</span></div>
  38.               <!-- <p>
  39.                 本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。
  40.               </p> -->
  41.               <span>18W+次播放</span>
  42.             </div>
  43.           </a>
  44.         </div>
  45.         <div class="item">
  46.           <a href="\"
  47.             ><img src="./images/5a969.jpg" alt="" />
  48.             <div class="des">
  49.               <div>
  50.                 <span>初级</span><span>JavaScript极速入门_玉女心经系列</span>
  51.               </div>
  52.               <span>10W+次播放</span>
  53.             </div>
  54.           </a>
  55.         </div>
  56.         <div class="item">
  57.           <a href="\"
  58.             ><img src="./images/5d633.jpg" alt="" />
  59.             <div class="des">
  60.               <div>
  61.                 <span>初级</span><span>独孤九贱(6)_jQuery视频教程</span>
  62.               </div>
  63.               <span>18W+次播放</span>
  64.             </div>
  65.           </a>
  66.         </div>
  67.         <div class="item">
  68.           <a href="\"
  69.             ><img src="./images/5a707.jpeg" alt="" />
  70.             <div class="des">
  71.               <div><span>初级</span><span>30分钟学会网站布局</span></div>
  72.               <span>6w+次播放</span>
  73.             </div>
  74.           </a>
  75.         </div>
  76.         <div class="item">
  77.           <a href="\"
  78.             ><img src="./images/5d106.jpg" alt="" />
  79.             <div class="des">
  80.               <div>
  81.                 <span>初级</span><span>[公益直播]Web前端开发极速入门</span>
  82.               </div>
  83.               <span>5W+次播放</span>
  84.             </div>
  85.           </a>
  86.         </div>
  87.         <div class="item">
  88.           <a href="\"
  89.             ><img src="./images/5a398.jpg" alt="" />
  90.             <div class="des">
  91.               <div><span>初级</span><span>phpStudy极速入门视频教程</span></div>
  92.               <span>40W+次播放</span>
  93.             </div>
  94.           </a>
  95.         </div>
  96.         <div class="item">
  97.           <a href="\"
  98.             ><img src="./images/5c582.jpg" alt="" />
  99.             <div class="des">
  100.               <div>
  101.                 <span>初级</span><span>ThinkPHP6.0极速入门(视频教程)</span>
  102.               </div>
  103.               <span>4W+次播放</span>
  104.             </div>
  105.           </a>
  106.         </div>
  107.         <div class="item">
  108.           <a href="\"
  109.             ><img src="./images/5d885.jpg" alt="" />
  110.             <div class="des">
  111.               <div><span>中级</span><span>独孤九贱(4)_PHP视频教程</span></div>
  112.               <span>18W+次播放</span>
  113.             </div>
  114.           </a>
  115.         </div>
  116.         <div class="item">
  117.           <a href="\"
  118.             ><img src="./images/5a730.jpg" alt="" />
  119.             <div class="des">
  120.               <div><span>中级</span><span>php完全自学手册</span></div>
  121.               <span>20W+次播放</span>
  122.             </div>
  123.           </a>
  124.         </div>
  125.         <div class="item">
  126.           <a href="\"
  127.             ><img src="./images/5d252.jpg" alt="" />
  128.             <div class="des">
  129.               <div><span>初级</span><span>MySQL权威开发指南（教程）</span></div>
  130.               <span>2W+次播放</span>
  131.             </div>
  132.           </a>
  133.         </div>
  134.         <div class="item">
  135.           <a href="\"
  136.             ><img src="./images/5d731.jpg" alt="" />
  137.             <div class="des">
  138.               <div>
  139.                 <span>初级</span><span>[公益直播]PHP实战开发极速入门</span>
  140.               </div>
  141.               <span>3W+次播放</span>
  142.             </div>
  143.           </a>
  144.         </div>
  145.       </div>
  146.     </div>
  147.   </body>

CSS代码

  1.   <style>
  2.     * {
  3.       padding: 0;
  4.       margin: 0;
  5.       box-sizing: border-box;
  6.     }
  7.     body {
  8.       background-color: #f3f5f7;
  9.     }
  10.     .container {
  11.       width: 1200px;
  12.       height: 646px;
  13.       display: grid;
  14.       margin: auto;
  15.     }
  16.     a {
  17.       text-decoration: none;
  18.     }
  19.     /* 模块标题 */
  20.     .container > .title {
  21.       text-align: center;
  22.       padding: 10px 0;
  23.     }
  25.     .container > .title span {
  26.       margin: 15px;
  27.       color: rgb(65, 65, 214);
  28.     }
  29.     /* 课程 */
  30.     .container > .course {
  31.       display: grid;
  32.       grid-template-columns: repeat(5, 1fr);
  33.       grid-template-rows: repeat(3, 1fr);
  34.     }
  36.     .container > .course > .item {
  37.       width: 217px;
  38.       height: 166px;
  39.       /* 设置边框圆角 */
  40.       border-radius: 8px;
  41.       /* 设置阴影 */
  42.       box-shadow: 0 0 10px #888;
  43.       /* 项目在单元格中垂直居中 */
  44.       place-self: start center;
  45.     }
  47.     .container > .course > .item:first-of-type {
  48.       grid-row: span 2;
  49.       height: 364px;
  50.       border-radius: 8px;
  51.     }
  52.     .container > .course > .item:first-of-type img {
  53.       width: 100%;
  54.       border-radius: 8px;
  55.     }
  57.     .container > .course > .item > a > img {
  58.       width: 100%;
  59.       border-radius: 8px;
  60.     }
  61.     .container > .course > .item > a > .des {
  62.       background-color: white;
  63.       display: flex;
  64.       flex-flow: column nowrap;
  65.       justify-content: space-between;
  66.       /* place-content: space-sbtween; */
  67.       min-height: 84px;
  68.       position: relative;
  69.       top: -40px;
  70.       border-radius: 8px;
  71.     }
  72.     .container > .course > .item > a > .des:hover {
  73.       min-height: 130px;
  74.       position: relative;
  75.       top: -85px;
  76.     }
  77.     /* .container > .course > .item > a > .des:hover p {
  78.       display: block;
  79.       background-color: rgb(219, 7, 156);
  80.     } */
  81.     .container > .course > .item > a > .des span {
  82.       font-size: 12px;
  83.       color: #555;
  84.       padding: 2px;
  85.       margin: 10px;
  86.     }
  88.     .container > .course > .item > a > .des p {
  89.       /* text-align: center; */
  91.       padding: 5px 6px 0 6px;
  92.       color: #93999f;
  93.       font-size: 12px;
  94.       height: 30px;
  95.       overflow: hidden;
  96.       line-height: 20px;
  97.       background-color: yellowgreen;
  98.     }
  100.     /* 调整‘初级’标签 */
  101.     .container > .course > .item > a > .des > div > span:first-of-type {
  102.       background-color: #939393;
  103.       color: white;
  104.       border-radius: 2px;
  105.     }
  106.   </style>
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