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

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 之dl dt dd模拟表格实例代码

CSS样式表: CSS实例教程:永远在网页底部的网页布局; 优秀的网页评论表单的设计方法; CSS编写经验谈:常用的10个CSS类名; CSS:网页表单实现鼠标悬停交互效果; CSS代码中注释的3种方法; CSS教程：网页头部css代码优化实例; 网页制作基础：声明文档类型描述（DTD）; 如何解决IE7和IE8的兼容性问题; CSS网页布局网页制作技巧总结; CSS网页设计：IE8和IE7共存; CSS2打印属性让打印HTML文档不出问题; 使用CSS3新技术完美实现圆角效果; jQuery插件实现css3效果; CSS教程：margin属性定义边外补白; CSS教程：padding属性定义边内补白; CSS教程：学习border-width属性; CSS教程：学习border-color属性; CSS教程：学习border-style属性; CSS教程：学习border属性; 网页排版经常用到的5个CSS基础

No. « ‹ 59 60 61 62 › »

技术文章搜索

关键字

CSS样式表中的 CSS 之dl dt dd模拟表格实例代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 334 ::

收藏到网摘: n/a

CSS 用ul li做圆角表格创建超链接及css 样式设置

随便搜下，几十万条。贴出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.ruanchen.com--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>

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

CSS 用ul li做圆角表格创建超链接及css 样式设置

CSS样式表 中的 CSS 之dl dt dd模拟表格实例代码

评论 (0) All

CSS样式表中的 CSS 之dl dt dd模拟表格实例代码