交互设计中心-72色

CSS是非常简单,强大的,可以把网页表现的统一,漂亮,规范,使页面更加亲切.可以减少网页制作的代码量.

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

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

dl dt dd的使用实例

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

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

一般情况下,一个图片加一行文字这样的形式都是用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,下面的左图片右文字则可以看下面的代码.

1. <dl>
2.   <dt><img src="images/content_box1.jpg" /></dt>
3.   <dd>
4.    <h4>会议设备</h4>
5.    <p>音视频会议系统，又称为电视电话会议系统，是指两个或两个以上不同地方的个人或群体，通过传输
6.     线路及多媒体设备，将声音、影像互传，达到即时互动的沟通，以完成会议目的的系统设备。在召开
7.     视频会议时，处于两地或多个不同地点的与会代表既可以听到对方的声音，又能看......</p>
8.    
9.    <span><a href="#">了解更多...</a></span>
10.   </dd>
11.   </dl>

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

转自：http://www.xlnv.net/Article/base/200911/815.html