css技巧:如何处理ul li边框重合

下面就是一个很好的实践,就让我们来谈谈用ul li如何实现边框重合:

效果图:
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;}

    <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>

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/713.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:

上一篇:

下一篇:已是最新文章

顶部 评论 底部