用Grid布局完成php中文网首页"热门推荐"课

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

通过3月20号晚上学习,基本熟悉grid布局的简单使用方法.用grid布局方式实现海外运维网热门推荐课程的布局,html和css代码如下:
html代码:

  1. /*引入css*/
  2.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3957845_h9ekcg68p3s.css">
  3.     <link rel="stylesheet" href="./css/hot-course2.css">
  1.     <div class="hotcourses">
  2.         <h1>热门课程</h1>
  3.         /*需要复制course-list div10次*/
  4.         <div class="course-list">
  5.             <div class="course">
  6.                 <a href="">
  7.                     <img src="./img/hot_img.png" alt="">
  8.                 </a>
  9.                 <div class="desc">
  10.                     <div class="title">
  11.                         <small class="tag">初级</small>
  12.                         <a href="">PHP是最好的编程语言编程语言</a>    
  13.                     </div>
  14.                     <div class="other">
  15.                        <span>35325次学习</span>
  16.                        <span class="iconfont icon-shoucang1 sc-1">&nbsp收藏</span>
  17.                     </div>
  18.                 </div> 
  19.             </div>
  20.         </div>
  21.     </div>

CSS代码如下:

  1. body{
  2.     padding: 0px;
  3.     margin: 0px;
  4.     box-sizing: border-box;
  5.     background-color: #e6e6e6;
  6. }
  7. body a{
  8.     text-decoration: none;
  9.     color:#555;
  10.     font-size: small;
  11. }
  12. body a:hover{
  13.     color:red
  14. }
  15. .hotcourses{
  16.     width: 1000px;
  17.     /* border: 1px solid #000; */
  18.     margin: 0 auto;
  19. }
  20. .course-list{
  21.     display: grid;
  22.     grid-template-columns: repeat(5,1fr);
  23.     gap: 20px 10px;
  24. }
  25. .course-list .course{
  26.     background-color: #fff;
  27.     border-radius: 5px;
  28.     overflow: hidden;
  29. }
  30. .course-list .course .desc{
  31.     padding: 10px;
  32.     display: grid;
  33.     gap: 10px;
  34. }
  35. .course-list .course img{
  36.       width: 100%;
  37.       border-radius: 5px 5px 0 0 ;
  40. }
  41. .course-list .course img:hover{
  42.     /* 鼠标放上去图片变大 */
  43.     transform: scale(1.1);
  44.     /* 图片变化速度0.3秒 */
  45.     transition: 0.3s;
  47. }
  48. .course .title .tag{
  49.     background-color:lightsalmon;
  50.     padding: 3px;
  51.     color: #fff;
  52.     font-size: x-small;
  54. }
  55. .course-list .course .desc .other{
  56.     display: flex;
  57.     place-content: space-between;
  58.     color: #aaa;
  59.     font-size:small;
  60. }
  61. .course-list .course .desc .other .sc-1{
  62.     font-size: small;
  63. }
  64. .course-list .course .desc .other .sc-1:hover{
  65.     color: red;
  66.     cursor: pointer;
  67. }

执行效果如下:

【文章出处:阜宁网站开发 http://www.1234xp.com/funing.html 欢迎留下您的宝贵建议】
更多阅读