用dl dt dd来制作列表
这里表格不复杂，只是一行两列，采用DL.DT.DD，如果显示数据，还是建议使用table
好处:1、布局合理一些；2、将来扩展很方便；3、CSS一定很少；
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<style>
6
*{ margin:0; padding:0;}
7body{ font-size:12px; line-height:1.8; padding:10px;}
8dl{clear:both; margin-bottom:5px;float:left;}
9dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
10dd{ position:absolute; right:5px;}
11h1{clear:both;font-size:14px;}
12</style>
13</head>
14<body>
15<h1>CSS列表代码</h1>
16<div>
17 <dl>
18 <dt><a href="#">·干炒牛河</a></dt>
19 <dd>爱煮饭</dd>
20 </dl>
21 <dl>
22 <dt><a href="#">·清蒸鲈鱼</a></dt>
23 <dd>爱煮饭</dd>
24 </dl>
25 <dl>
26</div>
27</body>
28</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<style>
6
*{ margin:0; padding:0;}
*7
body{ font-size:12px; line-height:1.8; padding:10px;}8
dl{clear:both; margin-bottom:5px;float:left;}9
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}10
dd{ position:absolute; right:5px;}11
h1{clear:both;font-size:14px;}12
</style>13
</head>14
<body>15
<h1>CSS列表代码</h1>16
<div>17
<dl>18
<dt><a href="#">·干炒牛河</a></dt>19
<dd>爱煮饭</dd>20
</dl>21
<dl>22
<dt><a href="#">·清蒸鲈鱼</a></dt>23
<dd>爱煮饭</dd>24
</dl>25
<dl> 26
</div>27
</body>28
</html>b
浙公网安备 33010602011771号