css实现九宫格

2018-06-24 02:03:58来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

原理:浮动+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>

效果:

鼠标悬浮效果:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpag

下一篇:github个人博客绑定单独阿里域名指南