/css中dl dt dd的排版实例说明

dl dt dd的使用实例

　　在制作内页的时候,会有三个板块,一个是横行的图片列表.一个是主体的竖列图文列表,一个 是侧边栏的图片列表.对于这种排版方式用dl dt dd列表排版是最好不过的了.先看看我们对这个页面的最初布局图.在写css的时候,最好就要养成画布局图的习惯.这样就可以很清晰的了解整个页面的 css分布.哪里用什么代码,如何布局都一目了然了.

从这个布局图看来,有三个地方是用到了dl dt dd的列表.先说一下每个dl dt dd的组合代码.

<li>
    <dl>
        <dt><img /></dt>
        <dd></dd>
    </dl>
</li>

　　一般情况下,一个图片加一行文字这样的形式都是用dl dt dd来排版.如何类似上图的.是一排的图片加文字,那就是将上面的代码看成一个li,然后用li横排即可.从上面的代码看,dl形如tr,在dt里面放图 片,在dd里面文字.而dl dt dd这个组合最容易出错的地方莫过于,dt里面只能放行级元素,也就是只能放一些a span等等的元素.而dd则可以放一些块级元素,例如p,div等等.

另外,dt是不能重复使用,而dd则可以.请看下面的代码:

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

一般情况下,一个图片加一行文字这样的形式都是用dl dt dd来排版.如何类似上图的.是一排的图片加文字,那就是将上面的代码看成一个li,然后用li横排即可.从上面的代码看,dl形如tr,在dt里面放图 片,在dd里面文字.而dl dt dd这个组合最容易出错的地方莫过于,dt里面只能放行级元素,也就是只能放一些a span等等的元素.而dd则可以放一些块级元素,例如p,div等等. 另外,dt是不能重复使用,而dd则可以.请看下面的代码:

. . .

　　你们所看到的上图的排版就是应用了dl dt dd作为主要的排版元素. 　　上面一行的图文是简单的应用dl dt dd,下面的左图片右文字则可以看下面的代码. 　(见图片中 会议设备-->了解更多……)

　 如果你在布局的时候遇到了像我这样的形式,用dl dt dd是最好不过的选择了..