用ul li實(shí)現(xiàn)邊框重合并附帶鼠標(biāo)經(jīng)過(guò)效果
發(fā)布時(shí)間：2014-03-20 16:00:53 作者：佚名 
我要評(píng)論
我要評(píng)論邊框重合這個(gè)效果并不難，只是我們沒(méi)有真正的動(dòng)手做過(guò)而已，下面讓我們來(lái)談?wù)動(dòng)胾l li如何實(shí)現(xiàn)邊框重合，并附帶鼠標(biāo)經(jīng)過(guò)效果
提到邊框重合，我們不妨打開(kāi)淘寶首頁(yè)瀏覽主體分類(lèi)內(nèi)容板塊瞧瞧---親，你看到了，正是這個(gè)，邊框重合。其實(shí)我們不難發(fā)現(xiàn)，這個(gè)效果并不難，只是我們沒(méi)有真正的動(dòng)手做過(guò)而已，所以不知道怎么做，那么下面就是一個(gè)很好的實(shí)踐，就讓我們來(lái)談?wù)動(dòng)胾l li如何實(shí)現(xiàn)邊框重合，并附帶鼠標(biāo)經(jīng)過(guò)效果。
最終效果圖：
代碼：
<!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下來(lái)實(shí)踐一下哦-.-
最終效果圖：
代碼：
復(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下來(lái)實(shí)踐一下哦-.-
相關(guān)文章
鼠標(biāo)經(jīng)過(guò)圖片顯示邊框的CSS代碼
鼠標(biāo)經(jīng)過(guò)圖片顯示邊框的CSS代碼，需要的朋友可以參考下。2011-11-23
基于jquery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)背景滑動(dòng)導(dǎo)航菜單特效源碼
jquery背景滑動(dòng)導(dǎo)航菜單代碼是一款基于jQuery實(shí)現(xiàn)的背景可滑動(dòng)的導(dǎo)航，鼠標(biāo)經(jīng)過(guò)導(dǎo)航時(shí)導(dǎo)航背景可滑動(dòng)2014-12-24
jquery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)懸浮相冊(cè)縮略圖是在鼠標(biāo)右側(cè)顯示大圖特效源碼
是一段實(shí)現(xiàn)了鼠標(biāo)懸浮縮略圖上時(shí)，在距離鼠標(biāo)右側(cè)固定距離的地方顯示縮略圖對(duì)應(yīng)的大圖效果代碼，顯示出來(lái)的大圖屬于懸浮效果，并不占用實(shí)際面積，此段代碼適應(yīng)于所有網(wǎng)頁(yè)使2014-12-23
jquery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)圖片上浮顯示產(chǎn)品更多說(shuō)明相冊(cè)特效源碼
jquery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)圖片上浮顯示產(chǎn)品更多說(shuō)明相冊(cè)特效源碼，是一段非常適合展示產(chǎn)品或技術(shù)一類(lèi)的相冊(cè)圖片代碼，需要此款代碼的朋友們可以前來(lái)下載使用2014-10-29
基于jquery實(shí)現(xiàn)的網(wǎng)頁(yè)通欄banner切換代碼+鼠標(biāo)經(jīng)過(guò)滑出右側(cè)在線客服特
基于jquery實(shí)現(xiàn)的網(wǎng)頁(yè)通欄banner切換代碼+鼠標(biāo)經(jīng)過(guò)滑出右側(cè)在線客服特效源碼是一段支持圖片滾動(dòng)以及鼠標(biāo)滑過(guò)時(shí)右側(cè)在線客服展開(kāi)代碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常2014-10-20
jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)標(biāo)題向上彈出特效源碼
這是一款基于jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)標(biāo)題向上彈出特效源碼，是一款基于jquery+css3實(shí)現(xiàn)的點(diǎn)擊左右箭頭可移動(dòng)左右滾動(dòng)圖片特效。鼠標(biāo)滑過(guò)圖片時(shí)會(huì)出現(xiàn)標(biāo)題向上彈出的效果，且2014-09-23
jQuery+hover 鼠標(biāo)經(jīng)過(guò)顯示邊框動(dòng)畫(huà)特效源碼
jQuery鼠標(biāo)經(jīng)過(guò)顯示邊框動(dòng)畫(huà)特效源碼是一款jQuery hover鼠標(biāo)經(jīng)過(guò)視頻標(biāo)簽描述及動(dòng)畫(huà)邊框特效，需要的朋友前來(lái)下載源碼2016-03-23
