使用ul和li實現的帶有邊框的方格效果程式碼

admin發表於2017-02-28

下面是一段由ul和li實現的方格效果，方格能夠合併邊框，並且滑鼠懸浮的時候會實現邊框變色效果，希望能夠給需要的朋友帶來參考效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>

相關文章