用ul li实现边框重合并附带鼠标经过效果

ttx9n · 发表于 2014-3-20 16:00:53

边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么下面就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果。

最终效果图：

代码：

复制代码代码如下:
<!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>

不妨copy下来实践一下哦-.-

JosephSA · 发表于 2022-8-19 02:57:21

建军节建军节建军节建军节

z835648964 · 发表于 2022-8-28 17:04:20

额风风风微风微风违法

feiyasqhr · 发表于 2022-10-18 13:03:26

那三门，你们谁寂寞才快乐撒

e8hwl6prw · 发表于 2022-12-16 06:50:27

看看看看

平平安安 · 发表于 2023-1-8 19:32:11

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

额呵呵 · 发表于 2023-2-7 10:02:38

66666666666

plvo189 · 发表于 2023-2-12 02:57:53

我找了挺久终于找到了

gc4hg · 发表于 2023-8-21 21:46:49

啦啦啦啦啦啦啦啦！

a75620618 · 发表于 2024-5-12 22:55:23

还有人在不。。。。。。。。。。啊

账号		自动登录	找回密码
密码			立即注册

[CSS] 用ul li实现边框重合并附带鼠标经过效果