練習九宮格

時間 2019-11-09

標籤練習九宮简体版

原文原文鏈接

背景:每日一練:繪製九宮格
要求:九宮格垂直居中於頁面,只能使用ul和li標籤,添加背景邊框css

代碼html

<!DOCTYPE html>
<html>
<body>

<h1>九宮格</h1>

<p>要求:</p>
<p>1:不能修改標籤，僅經過 css 實現效果</p>
<p>2:添加綠色的邊框</p>


<style type="text/css">
    ul{
        position: fixed;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        overflow: hidden;
        list-style: none;
        width: 200px;
        height: 200px;
        border: 10px solid green;
        padding: 0px;
        }

    li{
        width: 33.3333333%;
        height: 33.333333%;
        float: left;
        background: pink;
        color: white;
        border: 2px solid white;
        flex-wrap: nowrap;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

</body>
</html>

效果圖:flex