css实现9宫格

html

<div class="nine">
            <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>
        </div>

css

*{
        list-style: none;
        padding: 0; 
        margin: 0;
    }
    .nine{
        width: 170px; 
        height: 170px; 
        background: blue;
        margin:50px auto ;
    }
    .nine ul li{
        width: 50px; 
        height: 50px; 
        color: #000; 
        text-align: center;
        float: left;
        margin: 5px 0 0 5px;
        background: #fff;
        line-height: 50px;
    }
    .nine ul li:hover{
        border: 5px #f00 solid;
        box-sizing:border-box;
        width: 60px; 
        height: 60px; 
        margin: 0 -5px -5px 0;
    }