收藏
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>grid容器</title><style>* {margin: 0;padding: 0;box-sizing: border-box;background-color: brown;}html {font-size: 16px;}div.container {/* 设置container容器的大小和颜色 */width: 20rem;height: 20rem;background-color: green;/* 创建grid风格容器 */display: grid;/* 画表格 *//* 画行 *//* grid-template-rows: 5rem 5rem 5rem; */grid-template-rows: repeat(3, 5rem);/* 画例 *//* grid-template-columns: 5rem 5rem 5rem; */grid-template-columns: repeat(3, 5rem);/* 单元格方向 *//* 主轴方向 */grid-auto-flow: row;/* 交叉轴方向 *//* grid-auto-flow: column; *//* 多的单元格放入那里 */grid-auto-columns: 5rem;/* grap 行间距 列间距 */gap: 1rem 1rem;/* grip容器的对齐方式 *//* 垂直 水平对齐 */place-content: center;place-content: start center;place-content: start start;place-content: center start;place-content: end end;/* 剩余空间分配 */place-content: space-between;place-content: space-between space-around;place-content: space-between space-evenly;/* 项目在单元中的对齐方式 *//* 先对单元内容缩小 */place-items: center;place-items: start start;place-items: end end;place-items: start center;place-items: center;}/* 奇数的单元格颜色 */div.item:nth-of-type(odd) {background-color: yellow;}/* 偶数的单元格颜色 */div.item:nth-of-type(2n) {background-color: blue;}/* 对单元内容缩小 */div.item {width: 3rem;height: 3rem;}/* 对个别单元格位置调整 */div.item:nth-last-of-type(-n + 3) {place-self: end center;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><!-- 多出来的单元 --><!-- <div class="item">10</div> --></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
