打赏

css实现九宫格

原理：浮动+margin负边距

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>css实现九宫格</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            ul.box {
                list-style: none;
                width: 165px;
                height: 165px;
                padding: 30px;
            }
            
            .box li {
                /*关键--浮动*/
                float: left;
            }
            
            .box a {
                display: block;
                width: 50px;
                height: 50px;
                border: 5px solid blue;
                /*关键--margin负值*/
                margin-left: -5px;
                /*关键--margin负值*/
                margin-top: -5px;
            }
            
            .box a:hover {
                /*关键--相对定位*/
                position: relative;
                border-color: red;
                /*关键-- z-index*/
                z-index: 100;
            }
            
            .box:after {
                content: "";
                height: 0;
                visibility: hidden;
                clear: both;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <ul class="box">
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
                <li>
                    <a href=""></a>
                </li>
            </ul>
        </div>
    </body>

</html>

效果：

鼠标悬浮效果：

 

posted @ 2017-12-04 15:43  孟繁贵  阅读(1468)  评论(0)  编辑  收藏  举报
TOP