用div做的细线表格效果

最新推荐文章于 2022-10-24 20:22:30 发布

piperzero

最新推荐文章于 2022-10-24 20:22:30 发布

阅读量1.3k

点赞数

分类专栏：网站建设文章标签： div list javascript float 文档 c

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

 
 <!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> 
 

piperzero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用div做的细线表格效果

<script type="text/javascript"src="
复制链接

扫一扫