Idea: First define a DL list, then insert a background map in the DT area, fill in the instruction text in the DD area, and modify the style with CSS code.
-
Super Confident,
-
born Proud,
-
forever.
-
Hobbies: Music, dance.
-
work: computer, programming.
-
Welcome to make friends,
-
I am Ruder,
-
I endorse for myself.
The code is as follows:
1 <style>2 DL{3 Border:10px Solid #f1e9e9;4 padding:10px;5 width:160px;6 Height:400px;7}8 DT{9 width:160px;Ten Height:160px; One Background-image:URL (http://wx1.sinaimg.cn/mw690/006L4zGqly1flyqs1irzpj30e80e87fb.jpg); A background-size:160px 160px; -} - DD{ the Color:#999999; - Line-height:30px; - width:160px; - Height:30px; + padding:0; - Border:0; + margin:0; A} at </style> - <dl> - <dt></dt> - <dd> Super Confident,</dd> - <dd> Natural Pride,</dd> - <dd> forever. </dd> in <dd> Hobbies: Music, dance. </dd> - <dd> work: computer, programming. </dd> to <dd> Welcome to make friends,</dd> + <dd> I'm Lu,</dd>. - <dd> I endorse for myself. </dd> the </dl>
Personal card by DL, DT, DD + CSS