在网上找了好久都没有找到一个完整利用CSS+DIV代替传统table的代码，索性，自己亲自动手最终实现了利用CSS+DIV替代Table的代码，下面就是完整的代码，显示效果很不错！你可以直接运行就可以看到！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#header{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFCC33;
margin-left:10%;
width:80%;
height:30px;
background:url('../../My Documents/My Pictures/table.gif') repeat;
}
#header #headerul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#header #headerul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#header #headerul #forum{
text-align:center;
width:150px;
}
#header #headerul #amount{
text-align:center;
width:100px;
}
#tr #trul #amount{
text-align:center;
width:100px;
}
#tr{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#3399FF;
margin-left:10%;
width:80%;
height:30px;
background:#CCCCCC;
}
#tr #trul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#tr #trul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#tr #trul #forum{
text-align:center;
width:150px;
}
</style>
</head>
<body>
<div id="table">
<div id="header">
<ul id="headerul">
<li id="forum">论坛</li>
<li id="amount">文章数量</li>
<li id="amount">访问人数</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#header{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFCC33;
margin-left:10%;
width:80%;
height:30px;
background:url('../../My Documents/My Pictures/table.gif') repeat;
}
#header #headerul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#header #headerul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#header #headerul #forum{
text-align:center;
width:150px;
}
#header #headerul #amount{
text-align:center;
width:100px;
}
#tr #trul #amount{
text-align:center;
width:100px;
}
#tr{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#3399FF;
margin-left:10%;
width:80%;
height:30px;
background:#CCCCCC;
}
#tr #trul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#tr #trul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#tr #trul #forum{
text-align:center;
width:150px;
}
</style>
</head>
<body>
<div id="table">
<div id="header">
<ul id="headerul">
<li id="forum">论坛</li>
<li id="amount">文章数量</li>
<li id="amount">访问人数</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
</div>
</div>
</body>
</html>
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
