dl dd dt的使用

dl dd dt 适用于图文混合排版，要比ul li使用起来方便很多：

<div class="dl">
    	<dl>
        	<dt><img src="xxx.jpg">这里是图片标题</dt>
            <dd>这里就是我们要的内容了！</dd>
        </dl>
        <dl>
        	<dt><img src="xxx.jpg">这里是图片标题</dt>
            <dd>这里就是我们要的内容了！</dd>
        </dl>
        <dl>
        	<dt><img src="xxx.jpg">这里是图片标题</dt>
            <dd>这里就是我们要的内容了！</dd>
        </dl>
    </div>

css样式

.dl dl{
	clear:both;
	background:#0000FF;
	width:180px;
}
.dl dt{
	background:#FF00FF;
}
.dl dd{
	background:#FF0000;
	padding-left:5px;
	margin:0px;
}

评论

1 楼 fhtwins 2011-09-17  

非常好的例子！