使用ul和li實現的帶有邊框的方格效果代碼:下麵是一段由ul和li實現的方格效果，方格能夠合併邊框，並且滑鼠懸浮的時候會實現邊框變色效果，希望能夠給需要的朋友帶來參考效果，代碼實例如下:螞蟻部落 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15以上...
使用ul和li實現的帶有邊框的方格效果代碼:
下麵是一段由ul和li實現的方格效果，方格能夠合併邊框，並且滑鼠懸浮的時候會實現邊框變色效果，希望能夠給需要的朋友帶來參考效果，代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
以上代碼實現了我們的要求，代碼也比較簡單，這裡就不多介紹了，如有任何問題可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12806
更多內容可以參閱:http://www.softwhy.com/divcss/
