用Grid布局完成青狐资源网首页”热门推荐”课程列表-青狐资源网

用Grid布局完成青狐资源网首页”热门推荐”课程列表

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

html代码: /*引入css*/<linkrel=“stylesheet”href=“//at.alicdn.com/t/c/font_3957845_h9ekcg68p3s.css”><linkrel=“stylesheet”href=“./css/hot-course2.css”> <divclass=“hotcourses”><h1>热门课程</h1>/*需要复制course-list div10次专业系统搭建点我wcqh.cn*/<divclass=“course-list”><divclass=“course”><ahref=“”><imgsrc=“./img/hot_img.png”alt=“”></a><divclass=“desc”><divclass=“title”>class=“tag”>初级<ahref=“”>PHP是最好的编程语言编程语言</a></div><divclass=“other”><span>35325次学习</span><spanclass=“iconfont icon-shoucang1 sc-1”>&nbsp收藏</span></div></div></专业系统搭建点我wcqh.cndiv></div></div>

CSS代码如下:

body{ padding:0px; margin:0px; box–sizing: border–box; background–color:#e6e6e6;}body a{ text–decoration: none; color:#555; font–size:;}body a:hover{ color:red}.hotcourses{ width:1000px;/* border: 1px solid #000; */ margin:0auto;}.course–list{ display: grid; grid–template–columns:repea专业系统搭建点我wcqh.cnt(5,1fr); gap:20px10px;}.course–list .course{ background–color:#fff; border–radius:5px; overflow: hidden;}.course–list .course .desc{ padding:10px; display: grid; gap:10px;}.course–list .course img{ width:100%; border–radius:5px5px00;}.course–list .course img:hover{/* 鼠标放上去图片变大 */ transform: scale(1.1);/* 图片变化速度0.3秒专业系统搭建点我wcqh.cn*/ transition:0.3s;}.course .title .tag{ background–color:lightsalmon; padding:3px; color:#fff; font–size: x–;}.course–list .course .desc .other{ display: flex; place–content: space–between; color:#aaa; font–size:;}.course–list .course .desc .other .sc–1{ font–size:;}.course–list .course .desc .other .sc–1:hov专业系统搭建点我wcqh.cner{ color: red; cursor: pointer;}

执行效果如下:

批改老师：

PHPz 批改状态：合格老师批语：完成的很好，效果实现的不错，最新课程的后面还有一个“更多”

作者最新博文

php学习准备内容

2023-03-02 18:03:17

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END