您的位置:首页> 实例代码> CSS实例

ul和li 带有边框的方格代码

2019-11-20 17:50| 作者: admin| 查看: 1917| 评论: 0|来自: 蚂蚁部落

下面是一段由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>

上述实现了表格效果,感兴趣的朋友可以做一下参考。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部