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

发布时间:2021-09-29 17:35:28 作者:小新
来源:亿速云 阅读:154

小编给大家分享一下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实现边框重合并附带鼠标经过效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. Web开发(初级)- jQuery
  2. CSS中实现ul的li元素横向排列

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web开发

上一篇:如何设置div+css最小高度

下一篇:spring boot怎么实现RESTful API返回统一数据格式

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》