网格

来源：互联网发布：档案管理系统软件编辑：程序博客网时间：2024/04/30 01:17

这里写图片描述

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>

0 0