CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

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

脚本之家

随便搜下,几十万条。贴出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>




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