收藏
PHPz批改状态：合格
老师批语：
效果图如下：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./static/css/reset.css"></head><style></style><body><div class="text"><div class="item"><div class="img"><a href=""><img src="./static/images/phpkjkf.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div><div class="item"><div class="img"><a href=""><img src="./static/images/phpksrm.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div><div class="item"><div class="img"><a href=""><img src="./static/images/tlbb.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div><div class="item"><div class="img"><a href=""><img src="./static/images/dgjj.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div><div class="item"><div class="img"><a href=""><img src="./static/images/phpkjkf.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div><div class="item"><div class="img"><a href=""><img src="./static/images/phpksrm.png" alt=""></a></div><div class="title"><a href="">商品名称</a></div><div class="price"><a href="">RMB:68.00元</a></div></div></div><style>.text{width: 45em;height: 50em;/* 创建grid容器 */display: grid;/* 创建网格的行和列 *//* 创建3列，每列15em */grid-template-columns: repeat(3,15em);/* 创建3行，每行高15em */grid-template-rows: repeat(3,15em);/* 容器格子域 ：1-6个 参数为：行开始/行结束/列开始/列结束*/grid-area: 1/1/sapn 2 /span 2;/* 网格间距设置 */gap: 5px;/* 项目在容器的对齐方式：平均分配剩余空间 */place-content: space-between;/* 设置项目在网格中的对齐方式：居中 */place-items: center;}.text .item{width: 10em;height: 14em;}.text .item img{width: 10em;height: 10em;}.text >.item:nth-of-type(4){/* 单独设置网格对齐方式 :左上角对齐*/place-self: start;}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
