九宫格 -

by redky

HTML

<ol>
    <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>
</ol>

CSS

* {
    margin: 0;
    padding: 0;
}
ol {
    margin: 100px;
    width: 170px;
    padding: 5px 0 0 5px;
}
li {
    list-style: none;
    float: left;
}
li a {
    position: relative;
    display: inline-block;
    _display: inline;
    _zoom: 1;
    width: 50px;
    height: 50px;
    margin-left: -5px;
    margin-top: -5px;
    border: 5px solid #222;
    text-align: center;
}
a:hover {
    z-index: 1;
    border-color: #faa;
}
/*

  * {margin: 0;padding: 0;}
  ol {
    margin: 100px;
    overflow: hidden;
  }

  li {
    position: relative;
    list-style: none;
    height: 50px;
    width: 50px;
    border: 5px solid #000;
    float: left;
    margin-right: -5px;
    margin-bottom: -5px;
  }

  li:nth-child(3n+1) {
    clear: both;
  }

  li:nth-child(n+7) {
    margin-bottom: 0;
  }

  li:hover {
    z-index: 10;
    border-color: red;
  }

*/