Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿中文网课程标题
Blogger Information
Blog 17
fans 1
comment 0
visits 14792
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
仿中文网课程标题
邱世家的博客
Original
774 people have browsed it

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过渡效果 ，都需要在加强练习。
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