php中文网首页"热门推荐"课程列表组件(

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
HTML 部分
  1. <!doctype html>
  2. <html lang="cn-ZH">
  3. <head>
  4.     ......
  5.     <link rel="stylesheet" href="common.css">
  6. </head>
  7. <body>
  8. <header>
  9.     <img src="https://www.php.cn/static/images/new/logo-2x.png" alt="php.cn">
  10.     <p>程序员梦开始的地方</p>
  11. </header>
  12. <div class="mainContainer">
  13.     <div class="hotCourses">
  14.         <h3>热门推荐</h3>
  15.         <div class="coursesList">
  16.             <div class="course">
  17.                 <div class="image">
  18.                     <a href="">
  19.                         <img src="https://img.php.cn/upload/course/000/000/068/6250203a9746a798.jpg" alt="">
  20.                     </a>
  21.                 </div>
  22.                 <div class="description">
  23.                     <div class="title">
  24.                         <span class="tag">初级</span>
  25.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  26.                     </div>
  27.                     <div class="other">
  28.                         <span>12345次学习</span>
  29.                         <a href="">
  30.                             <span class="iconfont icon-shoucang"></span>
  31.                             收藏
  32.                         </a>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.             <div class="course">......</div>
  37.             <div class="course">......</div>
  38.             <div class="course">......</div>
  39.             <div class="course">......</div>
  40.             <div class="course">......</div>
  41.             <div class="course">......</div>
  42.             <div class="course">......</div>
  43.             <div class="course">......</div>
  44.             <div class="course">......</div>
  45.         </div>
  46.     </div>
  47. </div>
  48. </body>
  49. </html>
CSS 部分
  1. @import url(//at.alicdn.com/t/c/font_3961095_ighe51lxm1h.css);
  3. *{
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. header{
  10.     width: 1200px;
  11.     margin: 0 auto;
  12.     height: 6rem;
  13.     line-height: 6rem;
  14.     display: flex;
  15.     background: white;
  16. }
  18. header>img{
  19.     width: 140px;
  20.     height: 32px;
  21.     margin: auto 0;
  22. }
  24. header>p{
  25.     width: 100%;
  26.     font-weight: bold;
  27.     font-size: 1.3rem;
  28.     margin-left: 2rem;
  29. }
  31. .mainContainer{
  32.     background: #efefef;
  33. }
  35. .hotCourses{
  36.     width: 1200px;
  37.     margin: 0 auto;
  38.     padding-bottom: 1rem;
  39. }
  41. .hotCourses h3{
  42.     height: 5rem;
  43.     line-height: 5rem;
  44. }
  46. .hotCourses a{
  47.     text-decoration: none;
  48.     color: #555;
  49. }
  51. .hotCourses a:hover{
  52.     color: red;
  53. }
  55. .hotCourses .coursesList{
  56.     display: grid;
  57.     grid-template-columns: repeat(5,1fr);
  58.     gap: 30px 10px;
  59. }
  61. .hotCourses .coursesList .image{
  62.     font-size: 0;
  63.     overflow: hidden;
  64.     border-top-left-radius: 6px;
  65.     border-top-right-radius: 6px;
  66. }
  68. .hotCourses .coursesList img{
  69.     width: 100%;
  70. }
  72. .hotCourses .coursesList img:hover{
  73.     transform: scale(1.2);
  74.     transition: 0.3s;
  75. }
  77. .hotCourses .coursesList .course{
  78.     background: white;
  79.     border-radius: 6px;
  80. }
  82. .hotCourses .coursesList .course .description{
  83.     height: content-box;
  84.     padding: 1rem;
  85.     display: grid;
  86.     gap: 1rem;
  87. }
  89. .hotCourses .coursesList .course .description .title{
  90.     line-height: 1.5rem;
  91. }
  93. .hotCourses .coursesList .course .description .tag{
  94.     color: red;
  95.     background: lemonchiffon;
  96.     padding: 0.2rem 0.4rem;
  97.     font-size: 0.75rem;
  98.     border-radius: 2px;
  99. }
  100. .hotCourses .coursesList .course .description .other{
  101.     color: #aaa;
  102.     font-size: 0.75rem;
  103.     display: flex;
  104.     place-content: space-between;
  105. }
  107. .hotCourses .coursesList .course .description .other a{
  108.     color: #aaa;
  109. }
  111. .iconfont{
  112.     font-size: 0.75rem;
  113. }
页面效果

问题

第二个课程的标题只有一行，导致下面的“阅读次数和收藏”向上移动，怎样才能让“阅读次数和收藏”的位置和第一课程的一致？

【感谢本站数字底座由龙石数据提供 http://www.longshidata.com/pages/government.html】
更多阅读