回顾一下定义列表的的作用：
1.给一堆数据添加列表语义。
2.先通过dt标签定义列表中所有标题，然后再通过dd标签给每个标题添加描述信息。
下面根据定义列表的应用场景来做练习：
我们只是简单解决第一图文混排。其余以此类推。
我们把图片看做定义列表的标题，表示如下：
<dt><img src="img/w50_h50.jpg" width="50px"
height="58px"/></dt>
我们把文字部分看做是它的描述部分，表示如下：
<dd><h2><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" title="舍得智慧讲堂" >舍得智慧讲堂</a></h2>
<p><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" sign-trs-href="http://v.ifeng.com/special/2019sdzhjt/" title="刘永好：从小穷惯了">刘永好：从小穷惯了</a></p>
</dd>
我们再把综合起来这个问题就解决了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
<style type="text/css">
*{margin:0;
padding:0;
border:0;}
dl{width:200px;
height:200px;}
dl dt{float:left;}
dl dd{float:right;}
</style>
</head>
<body>
<dl>
<dt><img src="img/w50_h50.jpg" width="50px"
height="58px"/></dt>
<dd><h2><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" title="舍得智慧讲堂" >舍得智慧讲堂</a></h2>
<p><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" sign-trs-href="http://v.ifeng.com/special/2019sdzhjt/" title="刘永好：从小穷惯了">刘永好：从小穷惯了</a></p>
</dd>
</dl>
</body>
</html>
当然我们要达到上图效果，还要学一门关于样式的学问，以后我会逐一讲解，这里各位不会，直接抄我css代码即可。
代码：
*{margin:0;
padding:0;
border:0;}
dl{width:200px;
height:200px;}
dl dt{float:left;}
dl dd{float:right;}
综合起来代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
<style type="text/css">
*{margin:0;
padding:0;
border:0;}
dl{width:200px;
height:200px;}
dl dt{float:left;}
dl dd{float:right;}
</style>
</head>
<body>
<dl>
<dt><img src="img/w50_h50.jpg" width="50px"
height="58px"/></dt>
<dd><h2><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" title="舍得智慧讲堂" >舍得智慧讲堂</a></h2>
<p><a href="http://v.ifeng.com/special/2019sdzhjt/" target="_blank" rel="" sign-trs-href="http://v.ifeng.com/special/2019sdzhjt/" title="刘永好：从小穷惯了">刘永好：从小穷惯了</a></p>
</dd>
</dl>
</body>
</html>
运行浏览器结果如下：
网友评论