html:自定义列表(dl>dt+dd)的使用

以前用的都有用无序列表ul>li比较多，看了授课老师的写的代码才又重新认识了自定义列表，例如以下布局用自定义列表标签就相当方便：

只需要定义四个dl标签，在dt标签内添加分别添加相应的图片，在dd标签内添加p标签或者span标签或者其他可以添加文字的标签，再给dt和dd添加浮动属性（float:left;）即可。不过值得注意的是dd标签内可以添加任意其他标签，但是dt标签内不能添加块级标签只能添加行级或行内块级标签。

代码如下：

css:

dl{
overflow: hidden;
width: 373px;
float: left;
}

dl dt{
float: left;
}

 dl dd{
float: left;
width: 180px;
margin-left: 14px;
}

dl dd span:first-child{
font-size: 14px;
display: block;
width: 180px;
color: #272322;

}
dl dd span:last-child{
font-size: 12px;
margin-top: 20px;
width: 180px;
color: #888888;
display: block;
}

body:

<dl>
<dt><img src="img/news_list_img1.png"/></dt>
<dd>
<span>“机器人与无人机”专场演讲合辑</span>

<span>8月13日CCF-GAIR大会的机器人与无人机专场中，学界、业界大牛</span>
</dd>
</dl>