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

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

CSS样式表: 字符不会撑大表格的常见css样式; 表格高级使用技巧_把表格进行到底(必看); 网页中Span和Div的区别; 在IE与FF中如何居中的css写法; javascript横排竖排标准选项卡效果代码; 解决ie动态修改link样式，import css不刷新的问题; css不用图片美化按钮; 网页打开新窗口target=_blank不符合标准; Javascript的匿名函数讲解; Firefox2中输入框丢失光标bug的解决方法; Firefox返回时Iframe的显示Bug的解决方法; 使网页成黑白色调的滤镜; CSS学习笔记Padding 属性中参数的定义与使用; 无限级CSS树形菜单 Ver2.0; css多行多列的新闻模式; Internet Explorer 8 beta 中文版与IE7共存的解决方法; CSS对Web页面载入效率的影响分析总结; 巧妙地使用CSS选择器; 去除链接元素的虚线框兼容IE7、IE6、FF; DIV border边框显示不完全问题的解决方法

No. « ‹ 45 46 47 48 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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模拟表格实例代码