search

博客列表 >仿中文网课程标题

仿中文网课程标题

邱世家的博客
邱世家的博客原创
2020年06月30日 19:03:17773浏览

dom结构如下

  1. <body>
  2.     <div class="courses-list">
  3.       <h2 class="course-title">
  4.         <span class="iconfont">&#xe650;</span>php入门精品课程<span
  5.           class="iconfont"
  6.           >&#xe650;</span
  7.         >
  8.       </h2>
  9.       <div class="container">
  10.         <div class="course">
  11.           <a href=""><img src="./images/1.png" alt="" /></a>
  12.         </div>
  13.         <div class="course">
  14.           <a href=""><img src="./images/2.png" alt="" /></a>
  15.           <div class="desc">
  16.             <a><span>初级</span>编程学习方法分享直播公益课</a>
  17.             <span>1w+播放</span>
  18.           </div>
  19.         </div>
  20.         <div class="course">
  21.           <a href=""><img src="./images/3.jpg" alt="" /></a>
  22.           <div class="desc">
  23.             <a><span>初级</span>2018前端入门_HTML5</a>
  24.             <span>1w+播放</span>
  25.           </div>
  26.         </div>
  27.         <div class="course">
  28.           <a href=""><img src="./images/4.jpg" alt="" /></a>
  29.           <div class="desc">
  30.             <a><span>初级</span>CSS视频教程-玉女心经版</a>
  31.             <span>1w+播放</span>
  32.           </div>
  33.         </div>
  34.         <div class="course">
  35.           <a href=""><img src="./images/5.jpg" alt="" /></a>
  36.           <div class="desc">
  37.             <a><span>初级</span>JavaScript极速入门_玉女心经系列</a>
  38.             <span>1w+播放</span>
  39.           </div>
  40.         </div>
  41.         <div class="course">
  42.           <a href=""><img src="./images/6.jpg" alt="" /></a>
  43.           <div class="desc">
  44.             <a><span>初级</span>独孤九贱(6)_jQuery视频教程</a>
  45.             <span>1w+播放</span>
  46.           </div>
  47.         </div>
  48.         <div class="course">
  49.           <a href=""><img src="./images/7.jpg" alt="" /></a>
  50.           <div class="desc">
  51.             <a><span>初级</span>30分钟学会网站布局</a>
  52.             <span>1w+播放</span>
  53.           </div>
  54.         </div>
  55.         <div class="course">
  56.           <a href=""><img src="./images/8.jpg" alt="" /></a>
  57.           <div class="desc">
  58.             <a><span>初级</span>[公益直播]Web前端开发极速入门</a>
  59.             <span>1w+播放</span>
  60.           </div>
  61.         </div>
  62.         <div class="course">
  63.           <a href=""><img src="./images/9.jpg" alt="" /></a>
  64.           <div class="desc">
  65.             <a><span>初级</span>phpStudy极速入门视频教程</a>
  66.             <span>1w+播放</span>
  67.           </div>
  68.         </div>
  69.         <div class="course">
  70.           <a href=""><img src="./images/10.jpg" alt="" /></a>
  71.           <div class="desc">
  72.             <a><span>初级</span>ThinkPHP6.0极速入门(视频教程)</a>
  73.             <span>1w+播放</span>
  74.           </div>
  75.         </div>
  76.         <div class="course">
  77.           <a href=""><img src="./images/11.jpg" alt="" /></a>
  78.           <div class="desc">
  79.             <a><span>初级</span>独孤九贱(4)_PHP视频教程</a>
  80.             <span>1w+播放</span>
  81.           </div>
  82.         </div>
  83.         <div class="course">
  84.           <a href=""><img src="./images/12.jpg" alt="" /></a>
  85.           <div class="desc">
  86.             <a><span>初级</span>PHP完全自学手册</a>
  87.             <span>1w+播放</span>
  88.           </div>
  89.         </div>
  90.         <div class="course">
  91.           <a href=""><img src="./images/13.jpg" alt="" /></a>
  92.           <div class="desc">
  93.             <a><span>初级</span>MySQL权威开发指南</a>
  94.             <span>1w+播放</span>
  95.           </div>
  96.         </div>
  97.         <div class="course">
  98.           <a href=""><img src="./images/14.jpg" alt="" /></a>
  99.           <div class="desc">
  100.             <a><span>初级</span>[公益直播]PHP实战开发极速入门</a>
  101.             <span>1w+播放</span>
  102.           </div>
  103.         </div>
  104.       </div>
  105.     </div>
  106.   </body>

css样式

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <!-- 引入字体样式表 -->
  5.     <link rel="stylesheet" href="font-icon.css" />
  6.     <title>仿中文网课程标题</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #666;
  16.         font-size: 14px;
  17.       }
  18.       body {
  19.         background-color: lightgrey;
  20.       }
  21.       /* 外层容器 */
  22.       .courses-list {
  23.         width: 1200px;
  24.         height: 650px;
  25.         margin: 20px auto;
  26.         display: grid;
  27.         background-color: white;
  28.         border-radius: 5px;
  29.       }
  30.       /* 标题 */
  31.       .courses-list > .course-title {
  32.         color: #555555;
  33.         /* 标题垂直 水平居中 */
  34.         place-self: center;
  35.       }
  36.       /* 设置字体图标样式 */
  37.       .courses-list > .course-title span {
  38.         color: turquoise;
  39.         margin: 0 5px;
  40.       }
  41.       /* 划分网格 */
  42.       .courses-list > .container {
  43.         display: grid;
  44.         grid-template-columns: repeat(5, 1fr);
  45.         grid-template-rows: repeat(3, 1fr);
  46.       }
  47.       /* 课程 */
  48.       .courses-list > .container > .course {
  49.         width: 217px;
  50.         height: 166px;
  51.         border-radius: 5%;
  52.         box-shadow: 0 0 10px #666;
  53.         place-self: start center;
  54.       }
  55.       .courses-list > .container > .course:first-of-type {
  56.         grid-row: span 2;
  57.         height: 362px;
  58.       }
  59.       /* 课程图片 */
  60.       .courses-list > .container > .course a img {
  61.         width: 100%;
  62.         border-radius: 5%;
  63.       }
  64.       /* 课程描述 */
  65.       .courses-list > .container > .course > .desc {
  66.         display: grid;
  67.         place-content: space-between;
  68.         min-height: 84px;
  69.         background-color: white;
  70.         border-radius: 5%;
  71.         padding: 10px;
  72.         /* 相对定位上移 */
  73.         position: relative;
  74.         top: -42px;
  75.       }
  76.       .courses-list > .container > .course > .desc a {
  77.         color: #000000;
  78.         width: 100%;
  79.       }
  80.       .courses-list > .container > .course > .desc span {
  81.         font-size: small;
  82.         color: #555555;
  83.         margin-right: 10px;
  84.       }
  85.       .courses-list > .container > .course > .desc a span {
  86.         background-color: #939993;
  87.         color: white;
  88.         padding: 3px;
  89.         border-radius: 3px;
  90.       }
  91.       .courses-list > .container > .course > .desc:hover {
  92.         min-height: 130px;
  93.         cursor: pointer;
  94.         position: relative;
  95.         top: -90px;
  96.       }
  97.     </style>

总结：

  • 关于图片下面的文字区域还是没有理解怎么写，超出部分换行隐藏，css过渡效果 ，都需要在加强练习。
上一条：Chapter7 布局原理与实战下一条：grld仿 (PHP中文网php入门精品课程 )板块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多