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:;
        margin:;
    }
    .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;
    }