web开发中怎么用ulli实现边框重合并附带鼠标经过效果

小编给大家分享一下web开发中怎么用ul li实现边框重合并附带鼠标经过效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站建设、网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

效果图：
web开发中怎么用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>

看完了这篇文章，相信你对“web开发中怎么用ul li实现边框重合并附带鼠标经过效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

标题名称：web开发中怎么用ulli实现边框重合并附带鼠标经过效果
网站URL：https://www.cdcxhl.com/article8/godgip.html

成都网站建设公司_创新互联，为您提供、面包屑导航、品牌网站设计、网站设计公司、Google、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容