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

CSS样式表
CSS教程:闭合CSS浮动元素的几种方法
细说CSS3中的选择符
网页超级链接该以什么方式打开?
背投广告设计：用最少的时间来做最效率的事情
css中用javascript判断浏览器版本
css教程:经常保持CSS的整洁度和有序性
css教程:选择合适的、有意义的元素描述内容
CSS编写中灵活运行注释的意义
css教程:CSS文件应该保持整洁和统一
DIV CSS常用的网页布局代码
完全掌握纯CSS布局网页
serif和sans serif：西方国家的字母体系
基于XTHML标准的DIVCSS布局对SEO的影响
CSS合理的编码与组织技巧
网站变黑白灰色的4种代码详细讲解
css布局实例:网页布局的方法
YUI 中的 Grids CSS值得关注和学习的
CSS代码是否合理？是否优化？
css教程：网页中Span和Div的区别
div css网页适应不同分辨率技巧

No. « 1 2 3 4 »

技术文章搜索

关键字

CSS样式表 中的 CSS教程:dl dt dd模拟表格实例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-03   浏览: 53 ::
收藏到网摘: 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;
    }


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 全部选择 提示：你可先修改部分代码，再按运行]