收藏
天蓬老师批改状态：合格
老师批语：<a>标签的样式要重置一下就完美了
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>flex-grid</title><style>.container {width: 1200px;height: 650px;margin: 10px auto;background: #fff;display: grid;/* 把标题看成一行 */grid-template-columns: repeat(5, 250px);grid-template-rows: 80px 190px 190px 190px;}.container .item:first-of-type {grid-column: span 5;line-height: 80px;text-align: center;font-size: 1.5em;font-weight: 800;color: #4d555d;}/* 第一张竖向大图区域 */.container .item:nth-child(2) {grid-row: span 2;margin: 0 auto;}.container .item:nth-child(2) img {border-radius: 8px;}.container .item:nth-child(n + 3) {margin: 0 auto;position: relative;}.container .item:nth-child(n + 3) img {width: 217px;height: 124px;border-radius: 8px;}a {display: block;border-radius: 8px;padding: 15px 20px;position: absolute;top: 94px;transition: top 0.5s;height: 90px;width: 100%;background: #fff;color: #555;}.container .item:nth-child(n + 3) a:hover {color: #333;top: 50px;}.container .item:nth-child(n + 3) span {position: absolute;top: 130px;left: 0;width: 217px;height: 40px;padding: 0 20px;line-height: 40px;background: #fff;color: #93999f;font-size: 12px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;box-shadow: 0 4px 8px 0 rgba(67, 91, 116, 0.1);}.container .item i {font-size: 0.5em;margin-right: 5px;padding: 2px;color: grey;background-color: rgba(204, 202, 202, 0.239);}</style></head><body><div class="container"><div class="item">php入门精品课程</div><!-- 第一张竖大图 --><div class="item"><img src="./images/1.jpg" alt="" /></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div><div class="item"><img src="./images/2.png" alt="" /><a href=""><i>初级</i>编程学习方法分享直播公益课</a><span>1W+次播放</span></div></div></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
