10.27日作业

<!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>
容器展示图

运行展示图

相关文章
