用div+css制作纯细线表格

Posted on 2006/03/01 by pangel

<html>
<head>
<style type="text/css">
<!–
.rows {
display:block border-bottom:#cc0000 0px solid;
width:800px;
background-color: eeeeee;
display: block;
border: thin groove #FF9900;
}
.rows ul {
list-style:none; display:block; margin:0px;
}
.rows li {
width:160px;
}
.leftli {
float:left; border:#CC0000 1px solid; border-right:0px; border-bottom:0px; margin-right:-2px; padding:2px 10px 2px 10px;
}
.rightli {
border:#CC0000 1px solid; border-bottom:0px; padding:2px 10px 2px 10px;
}
.b-leftli {
float:left; border:#CC0000 1px solid; border-right:0px; margin-right:-2px; padding:2px 10px 2px 10px;
}
.b-rightli {
border:#CC0000 1px solid; padding:2px 10px 2px 10px;
}
–>
</style>

<title>测试div写表格</title></head>
<body>

<div class="rows">
<ul>
<li class="leftli">我是中国人</li>
<li class="leftli">我是中国人</li>
<li class="leftli">我是中国人</li>
<li class="leftli">我是中国人</li>
<li class="rightli">我是中国人</li>
</ul>
<ul>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="rightli">def</li>
</ul>
<ul>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="rightli">DEF</li>
</ul>
<ul>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="rightli">456</li>
</ul>
<ul>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="rightli">def</li>
</ul>
<ul>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="leftli">ABC</li>
<li class="rightli">DEF</li>
</ul>
<ul>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="leftli">123</li>
<li class="rightli">456</li>
</ul>
<ul>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="leftli">abc</li>
<li class="rightli">def</li>
</ul>
<ul>
<li class="b-leftli">ABC</li>
<li class="b-leftli">ABC</li>
<li class="b-leftli">ABC</li>
<li class="b-leftli">ABC</li>
<li class="b-rightli">DEF</li>
</ul>
</div>
</body>
</html>

About pangel

i am shadow
This entry was posted in Code. Bookmark the permalink. [228 views]

Related Posts

  • 暂无相关日志

Comments are closed.