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;

    }