繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:dl dt dd模拟表格实例
- CSS样式表
- 跨浏览器的CSS3产生器:CSS3 please
- YUICompressor:高效压缩CSS和JS代码的工具
- 收集国外47个令人瞠目结舌的CSS3动画演示
- CSS教程:通配属性批量替换的方法
- 清理无用的CSS样式比较有用的几个工具
- 页面元素的对齐：阅读线路不清晰
- 15个滑动门效果CSS网页导航菜单设计教程
- 网页制作教程:弹出层详解
- SEO实战:网页排名效果最好的标题写法
- 提高网站权重：提高网站PR和提高网站更新度
- 兼容浏览器的网页细线表格设计
- CSS教程:CSS3新功能和新特性
- CSS3模块的目前的状况
- ie6普及的大环境下暂时不要考虑w3c标准
- CSS技巧教程:让CSS代码更具有易维护性
- 控制first-letter伪类的背景
CSS样式表 中的 CSS教程:dl dt dd模拟表格实例
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 50 ::
收藏到网摘: n/a
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;
}
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><span>下载地址</span><span>更新时间</span>ks5u生物同步课课练（人教版必修一）</dt>
<dd class=fff><span>——</span><span>11.2</span>第一节 从生物圈到细胞生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细</dd>
<dd><span>——</span><span>11.3</span>第二节 细胞的多样性和统一性</dd>
<dd class=fff><span>——</span><span>11.4</span>单元测评</dd>
<dd><span>——</span><span>11.5</span>欧美代议制的确立与发展</dd>
<dd class=fff><span>——</span><span>11.6</span>中国古代文化史</dd>
<dd><span>——</span><span>11.7</span>近代中国的政治、经济及思想解放的潮流</dd>
<dd class=fff><span>——</span><span>11.9</span>近代中国政治发展史</dd>
<dd><span>——</span><span>11.10</span>近代中国经济发展史</dd>
<dd class=fff><span>——</span><span>11.11</span>近代中国思想解放潮流</dd>
<dd><span>——</span><span>11.12</span>现代西方的政治、经济与科技文化</dd>
<dd class=fff><span>——</span><span>11.13</span>罗斯福新政与二战后的世界经济</dd>
<dd><span>——</span><span>11.14</span>二战后世界政治格局的演变</dd>
<dd class=fff><span>——</span><span>11.16</span>19世纪以来的世界文学艺术与科技</dd>
<dd><span>——</span><span>11.17</span>现代中国的政治、经济及思想文化</dd>
<dd class=fff><span>——</span><span>11.18</span>现代中国政治发展史 </dd>
<dd><span>——</span><span>11.19</span>现代中国物质文明发展史（中国近现代社会生活的变迁、科技等）</dd>
<dd class=fff><span>——</span><span>11.30</span>古希腊罗马的政治制度</dd></dl>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
评论 (0) All
