使用ul和li实现的带有边框的方格效果代码_html/css

使用ul和li实现的带有边框的方格效果代码_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:30:23

asal

1806 orang telah melayarinya

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

Salin selepas log masuk

以上代码实现了我们的要求，代码也比较简单，这里就不多介绍了，如有任何问题可以跟帖留言。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12806

更多内容可以参阅:http://www.softwhy.com/divcss/