css

[imsobear]

用 CSS 实现以上的九宫格效果，大概每个前端同学都见过不下5次吧，尤其是在面试中。记得上次看到的时候还是一年前吧，那时候想着实现最后不知道什么事耽搁了，大概是根本就没想清楚吧，前两天再次看到，就尝试了一下，实现起来也是很简单的，直接看代码吧：

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>  
</ul>

ul, li {
  list-style: none;
}
.list {
  width: 315px;
  height: 315px;
  padding-top: 5px;
  padding-left: 5px;
  background-color: #ccc;
  /* omission clearfix */
}

.item {
  float: left;
  width: 100px;
  height: 100px;
  border: 5px solid #000;
  margin-left: -5px;
  margin-top: -5px;
}

.item:hover {
  border-color: #f40;
  position: relative;
  z-index: 10;
}

<iframe width="100%" height="300" src="http://jsfiddle.net/pkac0eqe/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

诺，的确很简单嘛，

[imsobear]

事故。。。