龙喵专栏 /前端 /内容

css技巧之如何实现ul li边框重合

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了:

淘宝边框重合

正是这个,边框重合。其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果。

css边框重合实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;}
    .box li{ float:left; list-style:none}
    .box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;}
    .box li a:hover{ border:5px solid #333; z-index:1;}
    </style>
</head>
<body>
    <ul class="box">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
         <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
         <li><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
    </ul>
</body>
</html>

最终效果图:

边框重合效果图

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:https://ailongmiao.com/read/693.html

[ web前端导航 ]:https://ailongmiao.com/web/

评论

继续阅读

  选择打赏方式

打赏

打赏