网格

CSS样式:


<style>
  * {
    padding: 0;
    margin: 0;
  }
    .box {
      width: 190px;
    }
    .box ul {
      margin-left: -1px;/*右移1px*/
      width: 192px;/*ul的宽要比外面盒子的宽190px还要宽2px即为192px(li宽47*4)+四个左边框=47*4+4=192*/
      height: 210px;
      background-color: pink;
    }
    .box ul li {
      position: relative;
      overflow: hidden;
      float: left;
      width: 47px;
      height: 69px;
      border-top: 1px solid #e7e7e7;
      border-left: 1px solid #e7e7e7;
      text-align: center;
    }
  </style>

HTML代码:

<div class="box">
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </div>
IT文库 » 网格
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址