资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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://cdkjz.cn/article/godgip.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220