personal card by dl、dt、dd + css

思想：先定义一个dl列表，然后在dt区域插入一张背景图，在dd区域填写说明文字，再用CSS代码修改样式。

超级自信，

天生骄傲，

永远牛逼。

爱好：音乐、舞蹈。

工作：计算机、编程。

欢迎交朋友，

我是鲁得，

我为自己代言。

代码如下：

 1 <style>
 2     dl {
 3         border: 10px solid #f1e9e9;
 4         padding: 10px;
 5         width: 160px;
 6         height: 400px;
 7     }
 8     dt {
 9         width: 160px;
10         height: 160px;
11         background-image:url(http://wx1.sinaimg.cn/mw690/006L4zGqly1flyqs1irzpj30e80e87fb.jpg);
12         background-size:160px 160px;
13     }
14     dd {
15         color: #999999;
16         line-height: 30px;
17         width: 160px;
18         height: 30px;
19         padding: 0;
20         border: 0;
21         margin: 0;
22     }
23 </style>
24 <dl>
25     <dt></dt>
26     <dd>超级自信，</dd>
27     <dd>天生骄傲，</dd>
28     <dd>永远牛逼。</dd>
29     <dd>爱好：音乐、舞蹈。</dd>
30     <dd>工作：计算机、编程。</dd>
31     <dd>欢迎交朋友，</dd>
32     <dd>我是鲁得，</dd>
33     <dd>我为自己代言。</dd>
34 </dl>

原文地址：https://www.cnblogs.com/viplued/p/9262246.html