Grid实现《PHP入门精品课》模块
示例代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="iconfont/iconfont.css" /> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #f3f5f7; } a { text-decoration: none; } .container { width: 1200px; margin: 20px auto; background: #fff; border-radius: 8px; } header > h3 { width: 100%; height: 50px; font-size: 20px; line-height: 30px; padding-top: 20px; color: #555; text-align: center; } header > h3 > i { color: #1e9fff; } main { width: 100%; height: 576px; margin-top: 20px; /* grid布局 三行五列 剩余空间平均分布 */ display: grid; grid-template-columns: repeat(5, 217px); grid-template-rows: repeat(3, 172px); place-content: space-evenly; } main > .item:first-of-type { /* 第一张长照片跨两行 */ grid-row: span 2; } main > .item { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); position: relative; } main > .item > a > img { width: 100%; border-radius: 8px; } main > .item > a > .course-intro { width: 100%; height: 80px; border-top-left-radius: 8px; border-top-right-radius: 8px; position: absolute; transition: top 0.5s; top: 90px; padding: 0 20px; background: #fff; } main > .item > a > .course-intro:hover { top: 50px; } main > .item > a > .course-intro h3 { padding: 16px 0 6px; font-size: 14px; max-height: 40px; color: #07111b; line-height: 21px; font-weight: 400; } main > .item > a > .course-intro h3 > i { font-size: 12px; font-style: normal; line-height: 12px; border-radius: 1px; color: #fff; background-color: #93999f; margin-top: 2px; margin-right: 4px; padding: 2px; } main > .item > a > .course-bottom { width: 100%; height: 42px; padding: 0 20px; background-color: #fff; color: #93999f; font-size: 12px; line-height: 36px; position: absolute; bottom: 0px; } </style> </head> <body> <div class="container"> <header> <h3> <i class="iconfont"></i> PHP入门精品课 <i class="iconfont"></i> </h3> </header> <main> <div class="item"> <a href=""><img src="images/index_learn_first.jpg" alt="" /></a> </div> <div class="item"> <a href=""> <img src="images/5b63c72c61569244.png" alt="" /> <div class="course-intro"> <h3><i>初级</i>编程学习方法分享直播公益课</h3> <p></p> </div> <div class="course-bottom"><p>1W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5aa23f0ded921649.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>2018前端入门_HTML5</h3> <p></p> </div> <div class="course-bottom"><p>18W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5ab346fc62ce4221.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>CSS视频教程-玉女心经版</h3> <p></p> </div> <div class="course-bottom"><p>10W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5acc118f11d6b969.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>JavaScript极速入门_玉女心经系列</h3> <p></p> </div> <div class="course-bottom"><p>18W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5d1c6e0d2b744633.jpg" alt="" /> <div class="course-intro"> <h3><i>中级</i>独孤九贱(6)_jQuery视频教程</h3> <p></p> </div> <div class="course-bottom"><p>12W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5a9fb97057b15707.jpeg" alt="" /> <div class="course-intro"> <h3><i>初级</i>30分钟学会网站布局</h3> <p></p> </div> <div class="course-bottom"><p>6W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5d24019911a24370.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>[公益直播]Web前端开发极速入门</h3> <p></p> </div> <div class="course-bottom"><p>5W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5a699f1b2da2b398.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>phpStudy极速入门视频教程</h3> <p></p> </div> <div class="course-bottom"><p>40W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5cecd27a4348b582.jpg" alt="" /> <div class="course-intro"> <h3><i>中级</i>ThinkPHP6.0极速入门(视频教程)</h3> <p></p> </div> <div class="course-bottom"><p>4W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5d1c6dfc9eb09885.jpg" alt="" /> <div class="course-intro"> <h3><i>中级</i>独孤九贱(4)_PHP视频教程</h3> <p></p> </div> <div class="course-bottom"><p>50W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5a13c87351613730.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>php完全自学手册</h3> <p></p> </div> <div class="course-bottom"><p>20W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5b19ef2990649817.jpg" alt="" /> <div class="course-intro"> <h3><i>初级</i>MySQL权威开发指南（教程）</h3> <p></p> </div> <div class="course-bottom"><p>2W+次播放</p></div> </a> </div> <div class="item"> <a href=""> <img src="images/5d240300be85b731.jpg" alt="" /> <div class="course-intro"> <h3><i>中级</i>[公益直播]PHP实战开发极速入门</h3> <p></p> </div> <div class="course-bottom"><p>3W+次播放</p></div> </a> </div> </main> </div> </body></html>
显示效果
总结
- 基本上实现了php中文网的《PHP入门精品课》模块布局与功能
- 使用grid布局能快速使项目定位在相应位置，只需要调整项目样式
- 本次使用的grid布局关键代码有：
main { width: 100%; height: 576px; margin-top: 20px; /* grid布局 三行五列 剩余空间平均分布 */ display: grid; grid-template-columns: repeat(5, 217px); grid-template-rows: repeat(3, 172px); place-content: space-evenly; } main > .item:first-of-type { /* 第一张长照片跨两行 */ grid-row: span 2; }
