收藏
PHPz批改状态：合格
老师批语：很好，结合实例，效果可以
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>.container{width: 1000px;height: 500px;display: grid;/*设置容器为3列每列200px*/grid-template-columns: repeat(3, 200px);/*设置容器为3行每行30px*/grid-template-rows: repeat(3, 30px);/*设置容器内单元格默认居中*/place-items: center;/*设置行内间隙10px*/gap: 10px;}.container > .item1{font-weight: bolder;grid-area: 1 / 2 / span 1 / span 1;/*单独设置这个单元格为垂直居下，水平居中*/place-self: end center;}.container > .item2{grid-area: 2 / 3 / span 1 / span 1;/*单独设置这个单元格为默认*/place-self:start;}.container > .item3{grid-area: 3 / 2 / span 1 / span 1;}/*隐式表格*/.container > .item4{grid-area: 4 / 2 / span 1 / span 1;/*单独设置这个单元格格式，垂直默认，水平居中*/place-self: start center;}</style><body><div class="container"><div class="item1">《春晓》</div><div class="item2">唐·孟浩然</div><div class="item3">春眠不觉晓，处处闻啼鸟。</div><div class="item4">夜来风雨声，花落知多少。</div></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
