<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>6.28Grid布局作业</title> <style> /* 初始化 */ * { padding: 0; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #666666; font-size: 14px; } /* 大盒子 */ .kecheng { width: 1200px; height: 646px; /* 转为grid */ display: grid; margin: auto; } /* 大标题 */ .kechengtitle { /* 文字居中 */ text-align: center; /* 项目自身位置居中 */ place-self: center; } /* 课程 */ .container { /* 转为grid布局 */ display: grid; /* 设置每个格子的宽高 */ grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px 5px; } .container > div { width: 217px; height: 166px; border-radius: 5%; box-shadow: 0 0 10px #888; place-self: start center; } .container > .item1 { /* 设置范围 */ grid-area: 1/1/3/2; width: 217px; height: 364px; } .container > .item1 { /* 设置范围 */ grid-area: 1/1/3/2; width: 217px; height: 364px; } .container > div > a > img { width: 217px; height: 124px; } .container > .item1 > a > img { width: 217px; height: 364px; border-radius: 5%; } item2 > a { position: relative; } .item2 > a > .bofang { display: block; width: 100px; height: 30px; position: absolute; font-size: 0.7rem; margin-top: 130px; margin-left: 10px; } .dongtai { position: absolute; width: 217px; height: 60px; background-color: #fff; margin-top: 100px; /* border-radius: 5%; */ transition: margin 0.3s; } .dongtai:hover { margin-top: 80px; } .dongtai > h3 > i { background-color: #666; color: #fff; font-size: 0.99rem; /* display: inline-block; */ margin: 3px 0; } </style> </head> <body> <div class="kecheng"> <div class="kechengtitle"><h3>PHP精品入门课程</h3></div> <div class="container"> <div class="item1"> <a href=""><img src="imges/index_learn_first.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 编程学习方法分享直播</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/gy.png" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 2018前端入门_HTML5</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/html5.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> CSS视频教程-玉女心经</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/css.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> JavaScript极速入门</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/js.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 独孤九剑(6)</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/jq.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 30分钟学会网站布局</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/30.jpeg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 编程学习方法分享直播</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/qd.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> phpStudy极速入门</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/phpstudy.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> TninkPHP6.0极速入门</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/tp.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> 独孤九剑4PHP视频</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/gdjj4.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> php完全自学教程</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/php.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> MySQL权威开发指南</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/php.jpg" alt="" /></a> </div> <div class="item2"> <a href=""> <div class="dongtai"> <h3><i> 初级 </i> [公益直播]PHP实战开发</h3> </div> <i class="bofang">1w+次播放</i> <img src="imges/gy.png" alt="" /></a> </div> </div> </div> </body></html>
实际效果
总结
- VScode编辑器中的资源管理中的大纲对CSS布局帮助很大
