DIV样式模仿TABLA

<style> 
#div1 { 
 width: 450px; 
 border-top: #000 1px solid; 
 border-left: #000 1px solid; 
} 
#div1 ul { 
 width: 450px; 
 margin: 0px; 
} 
#div1 li { 
 float: left; 
 width: 150px; 
 height: 50px; 
 list-style-type: none; 
 border-right:#000 1px solid; 
 border-bottom: #000 1px solid; 
 text-align: center; 
 line-height: 50px; 
} 
</style> 
<div id="div1"> 
 <ul> 
 <li style="width: 450px;">1</li> 
 <li>2</li> 
 <li>3</li> 
 <li>4</li> 
 <li>5</li> 
 <li>6</li> 
 <li>7</li> 
 <li>8</li> 
 <li>9</li> 
 <li>10</li> 
 </ul> 
</div> 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body,td{
font-size:12px;
}
#table {
    width: 401px;
    padding: 0px;
    background-color: #003300;
    border-left:1px #000 solid;
    border-top:1px #000 solid;
    }
#table span{
width:100px;
 height:15px;
 overflow : hidden;
 background-color: #f0f0f0;
 padding:0px;
 float:left;
border-bottom:1px #000 solid;
border-right:1px #000 solid;
}
-->
</style>
</head>

<body>
<table width="400"  border="1" cellpadding="0" cellspacing="0" bordercolor="#539CE5" bgcolor="#f0f0f0" style="border-collapse: collapse">
  <tr>
    <td width="25%">这个是TABLE</td>
    <td width="25%">表格2</td>
    <td width="25%">表格3</td>
    <td width="25%">表格4
    </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<br>
<div id="table">
    <span>这个是DIV</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
</div>
</body>
</html>
posted @ 2006-11-25 13:51  大力  阅读(1027)  评论(1)    收藏  举报