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

前端技术 2023/09/05 CSS
提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么下面就是一个很好的实践，就让我们来谈谈用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下来实践一下哦-.-

本文地址：https://www.stayed.cn/item/12189

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案