欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用ul li實(shí)現(xiàn)邊框重合并附帶鼠標(biāo)經(jīng)過效果

  發(fā)布時(shí)間：2014-03-20 16:00:53   作者：佚名   我要評論
邊框重合這個(gè)效果并不難，只是我們沒有真正的動(dòng)手做過而已，下面讓我們來談?wù)動(dòng)胾l li如何實(shí)現(xiàn)邊框重合，并附帶鼠標(biāo)經(jīng)過效果
提到邊框重合，我們不妨打開淘寶首頁瀏覽主體分類內(nèi)容板塊瞧瞧---親，你看到了，正是這個(gè)，邊框重合。其實(shí)我們不難發(fā)現(xiàn)，這個(gè)效果并不難，只是我們沒有真正的動(dòng)手做過而已，所以不知道怎么做，那么下面就是一個(gè)很好的實(shí)踐，就讓我們來談?wù)動(dòng)胾l li如何實(shí)現(xiàn)邊框重合，并附帶鼠標(biāo)經(jīng)過效果。

最終效果圖：
 
代碼：

復(fù)制代碼
代碼如下:

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

不妨copy下來實(shí)踐一下哦-.-

相關(guān)文章

最新評論