网站建设资讯

NEWS

网站建设资讯

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

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

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的盘龙网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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


 
 
 
 
 
*{ 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;} 
 
 
 
 
  • 1
  •  
  • 2
  •  
  • 3
  •  
  • 4
  •  
  • 5
  •  
  • 6
  •  
  • 7
  •  
  • 8
  •  
  • 9
  •  
  • 10
  •  
  • 11
  •  
  • 12
  •  
  • 13
  •  
  • 14
  •  
  • 15
  •      

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


    文章题目:web开发中怎么用ulli实现边框重合并附带鼠标经过效果-创新互联
    当前地址:http://njwzjz.com/article/ddjeog.html