X.Tian

X.T

那些年被坑过的模块

uuuu

CSS部分:
*{margin:0;padding:0;}
.box{overflow:hidden;margin:0 auto;padding:5px 0 0 5px;width:165px;height:165px;background-color:#00f;}
ul{width:200px;}
.box li{position:relative;float:left;margin-right:5px;margin-bottom:5px;width:50px;height:50px;background-color:#fff;list-style:none;text-align:center;line-height:50px;}
a{text-decoration:none;}
.text{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-color:#fff;}
.helper{position:absolute;top:0;left:0;margin-top:-5px;margin-left:-5px;width:60px;height:60px;}
a:hover .helper{z-index:1;background:red;}

HTML部分:

<div class=”box”>
<ul>
<li><a><span class=”text”>1</span></a></li>
<li><a><span class=”text”>2</span></a></li>
<li><a><span class=”text”>3</span></a></li>
<li><a><span class=”text”>4</span></a></li>
<li><a><span class=”text”>5</span></a></li>
<li><a><span class=”text”>6</span></a></li>
<li><a><span class=”text”>7</span></a></li>
<li><a><span class=”text”>8</span></a></li>
<li><a><span class=”text”>9</span></a></li>
</ul>
</div>

2015年8月12日 6 / /
标签:  暂无标签

评论回复

  1. 回复 马燕

    这么来的,好吧 。。。。

  2. 回复 darK

    这是什么。

  3. 回复 太古神王

    [给力] :razz: :razz: :razz:

  4. 回复 全职法师

    [嘻嘻] :cool: :cool:

  5. 回复 黄晓萌

    好吧。z-index调节层次,再加上动态的边距变化去掉一个border的距离,是这个样子吗?

  6. 回复 Jarvis

    感觉你棒棒哒,求关注! :roll: :roll:

7 + 6 =

回到顶部