好用的dl dt dd标签

今天还是学习css布局的时候.看到教材上有个例子如下图

如果用以往的table布局非常简单.三行三列非常easy.

但是转换成div布局就有些麻烦了.首先前面的图标不一致,其次最后的go还是不同的链接.

放3个div似乎有些浪费.总觉得有些别扭.

如果在不修改图标,就得用3的id.分别设置其背景图.如果用ul li 布局,后面的go图片也不好处理.至少自己还没有发现.但是如果用dl dt dd标签就很有意思了.

Dl 块级

包含

dt 标题

dd 内容

这里不妨把整个列表放在dl里

然后前图标和文字放在dt 里go图片放在dd里.然后设置其css就ok…..

页面代码

<dl> <dt id="address">在这里可以查询本公司的地址</dt> <dd><img src="images/5309.gif" width="29" height="14" /></dd> <dt id="email">可以将邮件发送到公司邮箱中</dt> <dd><img src="images/5309.gif" width="29" height="14" /></dd> <dt id="online">我们将对您的提问进行在线解答</dt> <dd><img src="images/5309.gif" width="29" height="14" /></dd> </dl>

 

Css代码

/*整个列表大小*/ #qa dl{ width:190px; height:150px; } /*最后go图片样式*/ #qa dd{ float:left; width:29px; height:14px; margin-top:15px; } /*第一行*/ #address{ padding-left:40px; width:118px; height:50px; background:url(../images/5306.gif) no-repeat 0px 10px; border-bottom:#cdcdcd 1px solid; float:left; } /*第二行:和第一行相同就是图片不一样*/ #email{ padding-left:40px; width:118px; height:50px; background:url(../images/5307.gif) no-repeat 0px 10px; border-bottom:#cdcdcd 1px solid; float:left; } /*第三行:和第一行相同就是图片不一样*/ #online{ padding-left:40px; width:118px; height:50px; background:url(../images/5307.gif) no-repeat 0px 10px; float:left; }