上一篇
下一篇
用div做的细线表格效果
作者:cmscn 日期:2008-09-16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {background: #a2abb2; font-family:Tahoma; font-size:12px;color: #222222;}
h6{padding-left:10px;margin:0;font-family:Tahoma; font-size:12px; font-weight:normal;}
div#content{border-right:1px solid #d2e0f0;}
div#content ul {margin:0; padding:0;background-color:#FFFFFF;text-overflow:ellipsis;}
div#content ul li {list-style-type:none;line-height:25px; text-align:left; float:left; margin:0; padding:0;text-overflow:ellipsis;}
div#content ul li ul {margin:0; padding:0;border-width: 0 0 0 1px;border-style:solid ;border-color: #d2e0f0;text-overflow:ellipsis;}
div#content ul li ul li {float:none;border-width:0 0 1px 0;border-style:solid ;border-color: #d2e0f0; margin:0; padding:0;text-overflow:ellipsis;}
#TableTitle {border-width:1px 1px 0 1px;border-style: solid;border-color: #d2e0f0; color: #2c4d7a;background-color: #B5C7E7; line-height:25px;text-align: left;}
.list1width{width:25%;}
.list2width{width:50%;}
.list3width{width:25%;}
-->
</style>
</head>
<body>
<div>
<div id="TableTitle">
<h6>This is my first web page!</h6>
</div>
<div id="content">
<ul>
<li class="list1width" >
<ul>
<li>Old table titli</li>
<li>This is the first line.</li>
<li>This is the first line.</li>
<li>We have 2 li in this bable.</li>
<li>Come on !Baby!</li>
</ul>
</li>
<li class="list2width">
<ul>
<li>第一行第二列内容</li>
<li>第二行第二列内容</li>
<li>第三行第二列内容</li>
<li>第四行第二列内容</li>
<li>第五行第二列内容</li>
</ul>
</li>
<li class="list3width">
<ul>
<li>He,he,DT loves me!</li>
<li>He,he,DT loves me!</li>
<li>He,He,YW loves me too!</li>
<li>But I love KCY.</li>
<li>But I love KCY.</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 471
发表评论
