现在网络上已经有很多很多的css详细的教程.幸福工作室会通过一些自身的项目实例制作一些笔记教程.既可以作为幸福工作室成员的一些读书笔记,也希望能分享给网友学习.

　　在接下来,我们会陆陆续续的不断更新有关css的一些代码的学习笔记.这些都是我们幸福工作室在做网站的过程中受到的一些启发或者遇到的一些问题,所以摘录下来分享给大家.

　　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>