一: 展示图片:

-------------------------

代码:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>dl,dt,dd的使用</title>
 6     <style type="text/css">
 7          html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,
 8         fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }
 9 
10         .all {
11             width: 800px;
12             margin: 0px auto;
13             border: 1px solid black;
14         }
15 
16         dl {
17             /*border: 1px solid red;*/
18             float: left;
19             width: 200px;
20             height: 260px;
21             box-shadow: 0px 0px 3px 3px #ccc;
22             margin-left: 20px;
23             margin-top: 20px;
24             margin-bottom: 20px;
25         }
26 
27         dt {
28             width: 100%;
29             height: 200px;
30             /*border: 1px solid red;*/
31         }
32 
33         dt img {
34             width: 100%;
35             height: 100%;
36         }
37 
38         dd {
39 
40             text-align: center;
41             line-height: 60px;
42             /*border: 1px solid red;*/
43         }
44 
45         /*IE6, IE7 生效*/
46         .floatfix{
47             *zoom:1;
48         }
49 
50         /*其他浏览器*/
51         .floatfix:after{
52             content:"";
53             display:table;
54             clear:both;
55         }
56 
57     </style>
58 </head>
59 <body>
60     <h1>案例一:显示图片</h1>
61 
62     <div class="all floatfix">
63 
64         <dl>
65             <dt><img src="img/1.png"></dt>
66             <dd>图片1</dd>
67         </dl>
68         <dl>
69             <dt><img src="img/2.png"></dt>
70             <dd>图片2</dd>
71         </dl>
72         <dl>
73             <dt><img src="img/3.png"></dt>
74             <dd>图片3</dd>
75         </dl>
76 
77     </div>
78 
79 </body>
80 </html>

注意:

1)初始化的时候设置了: dl, dd, dt, {margin: 0px; padding: 0px } . 这是一位 dd 默认是有 margin-left的.

如果没有设置 dd {magin:0px } ,出现的效果是:

--------------

二: 简单的表格:

------

代码:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>dl,dt,dd的使用</title>
 6     <style type="text/css">
 7          html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,
 8         fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }
 9 
10         .all {
11             width: 800px;
12             margin: 0px auto;
13             border: 1px solid black;
14         }
15 
16         dl {
17             width: 300px;
18             border: 1px solid red;
19         }
20 
21         dt {
22             /*border: 1px solid green;*/
23             float: left;
24             width: 40%;
25             background-color: green;
26             /*margin: 3px 0px;*/
27             /*margin-top: 2px;*/
28             margin: 2px 0px;
29         }
30 
31         dd {
32             /*border: 1px solid green;*/
33             float: right;
34             width: calc( 60% - 10px );
35             margin: 2px 0px;
36             padding-left: 10px;
37         }
38 
39 
40 
41         /*IE6, IE7 生效*/
42         .floatfix{
43             *zoom:1;
44         }
45 
46         /*其他浏览器*/
47         .floatfix:after{
48             content:"";
49             display:table;
50             clear:both;
51         }
52 
53     </style>
54 </head>
55 <body>
56     <h1>案例二: 简单的图表</h1>
57 
58     <div class="all">
59 
60         <dl class="floatfix">
61             <dt>Name: </dt>
62             <dd>Squall Li</dd>
63             <dt>Age: </dt>
64             <dd>23</dd>
65             <dt>Gender: </dt>
66             <dd>Male</dd>
67             <dt>Day of Birth:</dt>
68             <dd>26th May 1986</dd>
69         </dl>
70 
71     </div>
72 
73 </body>
74 </html>

注意:

1) dt , dd 一个左浮动, 一个右浮动 ; 同时如果设置 margin , 两个都要设置 ,且保持一致

2) 第 34行 width: calc( 60% - 10px ); calc () 函数的使用.