"热门推荐"课程列表组件(Grid)

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

代码展示

html

  1.   <div class="course">
  2.       <div class="biaoti">
  3.         <h2>热门推荐</h2>
  4.         <span class="gengduo">更多</span>
  5.       </div>
  6.       <div class="courses-list">
  7.         <!-- 课程 -->
  8.         <div class="list">
  9.           <!-- 课程图片 -->
  10.           <a href="">
  11.             <img src="111.jpg" alt="" />
  12.           </a>
  13.           <!-- 课程描述 -->
  14.           <div class="desc">
  15.             <div class="title">
  16.               <small class="tag">中级</small>
  17.               <a href="">Golang深入理解GPM模型</a>
  18.             </div>
  19.             <div class="other">
  20.               <span>600次学习</span>
  21.               <span><span class="iconfont icon-shoucang"></span>收藏</span>
  22.             </div>
  23.           </div>
  24.         </div>
  25.     </div>

css

  1. body {
  2.   background-color: #efefef;
  3. }
  5. body a {
  6.   text-decoration: none;
  7.   color: #555;
  8.   font-size: small;
  9. }
  10. body a:hover {
  11.   color: red;
  12. }
  13. .course {
  14.   width: 1020px;
  15. }
  16. /* 布局 */
  17. .biaoti {
  18.   display: flex;
  19.   place-content: space-between;
  20.   place-items: center;
  21. }
  22. .courses-list {
  23.   display: grid;
  24.   grid-template-columns: repeat(5, 1fr);
  25.   gap: 30px 10px;
  26. }
  28. .list img {
  29.   width: 100%;
  30.   border-radius: 5px 5px 0 0;
  31.   position: static;
  32.   z-index: 1;
  33. }
  35. /* 图片放大 */
  36. .list img:hover {
  37.   transform: scale(1.1);
  38.   transition: 0.3s;
  39. }
  40. .course {
  41.   /* border: 1px solid #000; */
  42. }
  43. .list {
  44.   background-color: white;
  45.   border-radius: 5px;
  46.   /* 图片溢出隐藏 */
  47.   overflow: hidden;
  48. }
  49. .list .desc {
  50.   padding: 15px;
  51.   position: static;
  52.   z-index: 2;
  53. }
  54. .list .desc .tag {
  55.   font-size: x-small;
  56.   color: blue;
  57.   background-color: lightcyan;
  58.   padding: 3px 5px;
  59.   border-radius: 3px;
  60. }
  61. .list .desc a {
  62.   line-height: 22px;
  63. }
  64. .list .desc .other {
  65.   color: #aaa;
  66.   font-size: xx-small;
  67.   display: flex;
  68.   place-content: space-between;
  69.   margin-top: 8px;
  70. }
  71. .other .iconfont {
  72.   font-size: 12px;
  73.   margin-right: 3px;
  74. }
  75. .other span:last-child:hover {
  76.   cursor: pointer;
  77.   color: red;
  78. }

【本文转自：防御ddos http://www.558idc.com/stgf.html提供,感谢支持】
更多阅读