Question

CSS dl,dt,dd怎么用能做出下图效果吗

书写是怎么个规范。dt dl dd还有什么其他相关代码吗？ dt dl dd相当于table表格的那个跟那个<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>这个算dd还是dl还dt?
<td> </td>????
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></table>?????dd dl dt怎么做出下面的表格，给个代码认识一下。我不知道是怎么写的，我用CC两年了，可就没用这过这个，晕死。 郁闷，没用过，

Answer 1

dl dt dd的结构和table是不一样的。在一个表格元素中，table包含tr，tr包含td；在一个dl结构中，dl包含dt和dd，但dt和dd不是相互包含的关系，而是同级关系，就像下面这样：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>

<dt></dt>

<dd></dd>

<dd></dd>
<dl>

dl标签的确切意思是“一个自定义的列表”，dt是列表中的项目名称，dd是列表项目的描述。所以在一个标准的DL列表里面不存在dt和dd相互包含的情况，自然也不能做出等价于table的多列表格的效果。但是在形态上与表格相似或者相同是可以的，这也不是dl列表的专利，div、ul这些也能做到，不是什么奇怪的事情。

不过话说回来，如果硬要让dt包含dd，似乎也未尝不可，例如像下面这样
<dl>
<dt>
<dd></dd>
<dd></dd>

</dt>
<dt>
<dd></dd>
<dd></dd>
</dt>
<dl>

这样就把table的结构给模拟出来了，每个DT相当于表格中的一行或者一列，每个DD相当于一个单元格，然后定义DT或者DD 的宽高，同时加一句display:inline-block;就可以了，似乎这样在道理上也是可行的，不过不符合规范罢了。

Answer 2

截图：使用360浏览器测试，兼容。代码如下：<style type="text/css">
<!--
dl {
border-top: 1px solid #FFFFFF;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
float: none;
height: 27px;
width: 252px;
}
dd {
width: 50px;
height: 25px;
border-top: 1px solid #999999;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #999999;
float: left;
margin: 0px;
text-align: center;
}
body {
background-color: #CCCCCC;
}
.style1 {
font-size: 14px;
color: #333333;
}
-->
</style>
<span class="style1">DL: 边框1 实线 上左白色,下右灰色<br>
DD: 边框1 实线 上左灰色,下右白色<br>
<br>
实现浮雕表格效果
<br>
注意：控制好外层DL宽度，来限制DL的列
</span>
<dl>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl> 忘采纳！

Answer 3

利用CSS 控制 可以实现这个效果 不过代码量比较多 反而没TABLE来得痛快 因为DL本身定义的是列表 不是表格dl dt dd 的格式是<dl> <dt>标题一</dt> <dd>标题一的描述</dd> <dt>标题二</dt> <dd>标题二的描述</dd> <dd>标题二的描述</dd></dl> 简单的记忆方法是DL L看作list 即列表DT T 看作title 标题DD D 看作description 描述 dd是用来解释DT的 所以DD可以多个 参考标题二的描述 所以DL在最外面 列表里面有标题 标题后面跟着对标题的描述

Answer 4

什么图都看不到。规范就是：一个dl套住一个或多个dt、dd

Answer 5

说好的图片呢？

Answer 6

一般都是可以的，具体效果贴出来啊。