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/article6/ddjeog.html

成都网站建设公司_创新互联，为您提供自适应网站、建站公司、品牌网站设计、网站营销、云服务器、面包屑导航

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

猜你还喜欢下面的内容