CSS 之dl dt dd模拟表格实例代码

ttx9n · 发表于 2009-11-22 13:41:21

div+css再牛*也无法完全取代table，很多时候还是需要用到表格，这里就不探讨孰优孰劣，什么时候要用表格什么时候用div了。随便搜下，几十万条。贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0
CSS:

复制代码代码如下:
dl,dt,dd{
margin:0;
background:#fff5fa;
font-size:14px;
}
dl{
margin:0 auto;
width:50%;
border:1px solid #f8b3d0;
border-bottom:none;
}
dt{
font-weight:800;
background:#ff99cc;
color:#fff;
}
dt,dd{
line-height:30px;
padding:0 0 0 10px;
border-bottom:1px solid #f8b3d0;
height:30px;
overflow:hidden
}
dd{
text-indent:3em;
}
.fff{
background:#fff
}
dt span,dd span{
display:block;
float:right;
font-size:14px;
border-left:1px solid #f8b3d0;
text-indent:0em;
width:80px;
text-align:center;
}

Xhtml:

复制代码代码如下:
<dl class=hb>
<dt>下载地址更新时间ks5u生物同步课课练（人教版必修一）</dt>
<dd class=fff>——11.2第一节从生物圈到细胞生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细</dd>
<dd>——11.3第二节细胞的多样性和统一性</dd>
<dd class=fff>——11.4单元测评</dd>
<dd>——11.5欧美代议制的确立与发展</dd>
<dd class=fff>——11.6中国古代文化史</dd>
<dd>——11.7近代中国的政治、经济及思想解放的潮流</dd>
<dd class=fff>——11.9近代中国政治发展史</dd>
<dd>——11.10近代中国经济发展史</dd>
<dd class=fff>——11.11近代中国思想解放潮流</dd>
<dd>——11.12现代西方的政治、经济与科技文化</dd>
<dd class=fff>——11.13罗斯福新政与二战后的世界经济</dd>
<dd>——11.14二战后世界政治格局的演变</dd>
<dd class=fff>——11.1619世纪以来的世界文学艺术与科技</dd>
<dd>——11.17现代中国的政治、经济及思想文化</dd>
<dd class=fff>——11.18现代中国政治发展史 </dd>
<dd>——11.19现代中国物质文明发展史（中国近现代社会生活的变迁、科技等）</dd>
<dd class=fff>——11.30古希腊罗马的政治制度</dd></dl>

<!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>www.jb51.net--dl dt dd表格</title> 
<style> 
dl,dt,dd{ 
margin:0; 
background:#fff5fa; 
font-size:14px; 
} 
dl{ 
margin:0 auto; 
width:50%; 
border:1px solid #f8b3d0; 
border-bottom:none; 
} 
dt{ 
font-weight:800; 
background:#ff99cc; 
color:#fff; 
} 
dt,dd{ 
line-height:30px; 
padding:0 0 0 10px; 
border-bottom:1px solid #f8b3d0; 
height:30px; 
overflow:hidden 
} 
dd{ 
text-indent:3em; 
} 
.fff{ 
background:#fff 
} 
dt span,dd span{ 
display:block; 
float:right; 
font-size:14px; 
border-left:1px solid #f8b3d0; 
text-indent:0em; 
width:80px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<dl class=hb> 
<dt>下载地址更新时间ks5u生物同步课课练（人教版必修一）</dt> 
<dd class=fff>——11.2第一节 从生物圈到细胞生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细</dd> 
<dd>——11.3第二节 细胞的多样性和统一性</dd> 
<dd class=fff>——11.4单元测评</dd> 
<dd>——11.5欧美代议制的确立与发展</dd> 
<dd class=fff>——11.6中国古代文化史</dd> 
<dd>——11.7近代中国的政治、经济及思想解放的潮流</dd> 
<dd class=fff>——11.9近代中国政治发展史</dd> 
<dd>——11.10近代中国经济发展史</dd> 
<dd class=fff>——11.11近代中国思想解放潮流</dd> 
<dd>——11.12现代西方的政治、经济与科技文化</dd> 
<dd class=fff>——11.13罗斯福新政与二战后的世界经济</dd> 
<dd>——11.14二战后世界政治格局的演变</dd> 
<dd class=fff>——11.1619世纪以来的世界文学艺术与科技</dd> 
<dd>——11.17现代中国的政治、经济及思想文化</dd> 
<dd class=fff>——11.18现代中国政治发展史 </dd> 
<dd>——11.19现代中国物质文明发展史（中国近现代社会生活的变迁、科技等）</dd> 
<dd class=fff>——11.30古希腊罗马的政治制度</dd></dl> 
</body> 
</html>

提示：您可以先修改部分代码再运行

plvo189 · 发表于 2022-10-24 23:20:11

笑纳了老板

5vulod · 发表于 2022-12-13 10:40:06

。。。。。。。。。。。。。。。

rveqwdpw5 · 发表于 2023-5-4 10:52:36

终于找到了，我擦

kwa3hgmjp · 发表于 2023-9-30 23:34:12

儿童服务绯闻绯闻绯闻

pwseqn1h · 发表于 2023-12-2 16:19:34

很好，谢谢分享

u7yxn9 · 发表于 2024-4-22 21:14:09

额风风风微风微风违法

95nd4ba · 发表于 2024-5-11 11:22:23

哦哦哦ijhhsdj

0y3yp · 发表于 2024-6-17 12:15:07

强烈支持楼主ing……

6hruhg · 发表于 2024-7-4 22:00:53

来看看怎么样

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS 之dl dt dd模拟表格实例代码