码迷,mamicode.com
首页 > Web开发 > 详细

css实现九宫格,覆盖单格显示边框

时间:2020-03-29 01:38:09      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:data   htm   none   http   isp   ref   border   lis   title   

效果图

技术图片

css

    *{
        margin:0px;
        padding:0px;
    }
    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-left:-5px;
        margin-top:-5px;        
    }
    .box a:hover{
        position:relative;
        border-color:red;
        z-index:100;
    }
    .box:after{
        content:"";
        height:0;
        visibility:hidden;
        clear:both;
        display:block;
    }

html

<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>

本文转载于猿2048:css实现九宫格,覆盖单格显示边框

css实现九宫格,覆盖单格显示边框

标签:data   htm   none   http   isp   ref   border   lis   title   

原文地址:https://www.cnblogs.com/homehtml/p/12590294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!