今天还是学习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;

}