仿PHP中文网的热门推荐栏目

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <h2>热门推荐</h2>
  2.         <div class="courses-list">
  3.             <div class="course">
  4.                 <a href="">
  5.                     <img src="C:\Users\hao_z\Desktop\php\static\picture\hot_courses\hot_course_1.png" alt="">
  6.                 </a>
  7.                 <div class="desc">
  8.                     <div class="title">
  9.                         <small class="tag chu">初级</small>
  10.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  11.                     </div>
  12.                     <div class="other">
  13.                         <span>88787次学习</span>
  14.                         <!-- <div class="shoucang">
  15.                             <input type="checkbox" name="shoucang" id="shoucang">
  16.                             <label for="shoucang">收藏</label>
  17.                         </div> -->
  18.                         <a href="" class="shoucang">☆ 收藏</a>
  19.                     </div>
  20.                 </div>
  21.             </div>
  1. body{
  2.     background-color: #efefef;
  3.     padding: 2px;
  4. }
  5. body a{
  6.     text-decoration: none;
  7.     color: #555;
  8.     font-size: small;
  9. }
  10. body a:hover{
  11.     color: red;
  12. }
  13. .hot_courses{
  14.     width: 1020px;
  15.     /* border: 1px solid black; */
  16.     /* 居中 */
  17.     margin: 0 auto;
  18. }
  20. .hot_courses .courses-list{
  21.     display: grid;
  22.     grid-template-columns: repeat(5, 1fr);
  23.     gap: 30px 10px;
  24. }
  25. .courses-list .course{
  26.     background-color: white;
  27.     border-radius: 5px;
  28.     /* 溢出隐藏 */
  29.     overflow: hidden;
  30. }
  31. .chu{
  32.     color: #00aaff;
  33.     background-color: hsla(196, 79%, 94%, 0.782);
  34. }
  35. .zhong{
  36.     color: red;
  37.     background-color: rgb(241, 204, 190);
  38.     /* opacity: 40%; */
  39. }
  40. .hot_courses .courses-list img{
  41.     /* 100%填充 */
  42.     width: 100%;
  43.     border-radius: 5px 5px 0 0;
  44. }
  45. .hot_courses .courses-list img:hover{
  46.     transform: scale(1.1);
  47.     transition: 0.3s;
  48. }
  49. .hot_courses .courses-list .desc{
  50.     padding: 15px;
  51. }
  52. .hot_courses .courses-list .desc .tag{
  53.     border-radius: 2px;
  54.     padding: 2px 5px;
  55.     font-size: x-small;
  56. }
  58. .hot_courses .courses-list .title>a{    
  59.     font-weight: 500;
  60. }
  61. .hot_courses .courses-list .title{
  62.     height: 40px;
  63.     overflow: hidden;
  64. }
  65. .hot_courses .courses-list .desc .other{
  66.     color: #aaa;
  67.     font-size: x-small;
  68.     display: flex;
  69.     place-content: space-between;
  70.     margin-top: 10px;
  71. }
  72. .hot_courses .courses-list .desc .other>a{
  73.     color: #aaa;
  74.     font-size: x-small;
  75. }

仿PHP中文网热门推荐

总结：

能看出来的效果基本都放上了，还有几点不足：收藏应该不是a标签，效果像CheckBox，但用CheckBox做不出来一样的效果；颜色不好调，应该是没掌握技巧。

【转自：东台网页设计公司 http://www.1234xp.com/dongtai.html 复制请保留原URL】
更多阅读