登录  /  注册
首页 > 博客列表 > 6月28号作业之仿php中文网首页入门精品课程模块
博主信息
博文 32
粉丝 2
评论 0
访问量 26967
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
6月28号作业之仿php中文网首页入门精品课程模块
简行
原创
527人浏览过

使用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>
批改老师：GuanhuiGuanhui

批改状态：合格

老师批语：课程的标题有点问题，需要调整！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录