dl,dt,dd实现新闻列表的一个实例
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<title>News</title>
6
<style type="text/css">
7
body{
8
font-size:12px;
9 font-family:"SimSun";
10
}
11dl.news{
12 margin:0;
13 padding:0 0 8px 0;
14 color:#10478c;
15 border:solid 1px #999;
16}
17dl.news dt{
18 margin:0;
19 padding:0 0.5em;
20 font-weight:bold;
21 position:relative;
22 height:26px;
23 line-height:26px;
24 border-bottom:solid 1px #999;
25 background:#f7f7f7;
26}
27dl.news dd{
28 margin:0 5px;
29 padding:2px 70px 0 20px;
30 position:relative;
31 height:auto;
32 min-height:22px;
33 _height:22px;
34 line-height:18px;
35 border-bottom: dashed 1px #ddd;
36background:url(http://bbs.blueidea.com/images/smilies/default/han.gif) left center no-repeat;
37}
38dl.news span{
39 position:absolute;
40 width:70px;
41 text-align:right;
42 top:0;
43 right:0;
44}
45dl.news dt span{
46 font-weight:normal;
47 padding:0 4px 0 0;
48 color:#666;
49}
50dl.news dd span{
51 color:#ccc;
52}
53a:link,a:visited{
54 color:#1e50a2;
55 text-decoration: none;
56}
57a:hover{
58 color:#ba2636;
59 text-decoration:underline;
60
}
61</style>
62</head>
63<body>
64<div style="width:300px;">
65<dl class="news">
66 <dt>国内新闻<span><a href="#">更多信息</a></span></dt>
67 <dd>
68 <a href="#">商务部披露汇源并购案审查过程</a>
69 <span>2009-02-14</span>
70 </dd>
71 <dd>
72 <a href="#">萧万长称台日确认特殊伙伴关系</a>
73 <span>2009-02-14</span>
74 </dd>
75 <dd>
76 <a href="#">台定今年为台日特殊伙伴关系年</a>
77 <span>2009-02-14</span>
78 </dd>
79 <dd>
80 <a href="#">云南公安厅规定若出现牢头狱霸直接领导免职</a>
81 <span>2009-02-14</span>
82 </dd>
83 <dd>
84 <a href="#">出台6条警规治理队</a>
85 <span>2009-02-14</span>
86 </dd>
87 <dd>
88 <a href="#">出现假冒大相国寺高僧</a>
89 <span>2009-02-14</span>
90 </dd>
91 <dd>
92 <a href="#">著名笑星笑林涉虚假代言</a>
93 <span>2009-02-14</span>
94 </dd>
95 <dd>
96 <a href="#">福建莆田关闭模拟信号 强行推广数字电视</a>
97 <span>2009-02-14</span>
98 </dd>
99</dl>
100</div>
101</body>
102</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
<title>News</title>6
<style type="text/css">
7
body{
body8
font-size:12px;9
font-family:"SimSun";10
}11
dl.news{12
margin:0;13
padding:0 0 8px 0;14
color:#10478c;15
border:solid 1px #999;16
}17
dl.news dt{18
margin:0;19
padding:0 0.5em;20
font-weight:bold;21
position:relative;22
height:26px;23
line-height:26px;24
border-bottom:solid 1px #999;25
background:#f7f7f7;26
}27
dl.news dd{28
margin:0 5px;29
padding:2px 70px 0 20px;30
position:relative;31
height:auto;32
min-height:22px;33
_height:22px;34
line-height:18px;35
border-bottom: dashed 1px #ddd;36
background:url(http://bbs.blueidea.com/images/smilies/default/han.gif) left center no-repeat;37
}38
dl.news span{39
position:absolute;40
width:70px;41
text-align:right;42
top:0;43
right:0;44
}45
dl.news dt span{46
font-weight:normal;47
padding:0 4px 0 0;48
color:#666;49
}50
dl.news dd span{51
color:#ccc;52
}53
a:link,a:visited{54
color:#1e50a2;55
text-decoration: none;56
}57
a:hover{58
color:#ba2636;59
text-decoration:underline;60
}61
</style>62
</head>63
<body>64
<div style="width:300px;">65
<dl class="news">66
<dt>国内新闻<span><a href="#">更多信息</a></span></dt>67
<dd>68
<a href="#">商务部披露汇源并购案审查过程</a>69
<span>2009-02-14</span>70
</dd>71
<dd>72
<a href="#">萧万长称台日确认特殊伙伴关系</a>73
<span>2009-02-14</span>74
</dd>75
<dd>76
<a href="#">台定今年为台日特殊伙伴关系年</a>77
<span>2009-02-14</span>78
</dd>79
<dd>80
<a href="#">云南公安厅规定若出现牢头狱霸直接领导免职</a>81
<span>2009-02-14</span>82
</dd>83
<dd>84
<a href="#">出台6条警规治理队</a>85
<span>2009-02-14</span>86
</dd>87
<dd>88
<a href="#">出现假冒大相国寺高僧</a>89
<span>2009-02-14</span>90
</dd>91
<dd>92
<a href="#">著名笑星笑林涉虚假代言</a>93
<span>2009-02-14</span>94
</dd>95
<dd>96
<a href="#">福建莆田关闭模拟信号 强行推广数字电视</a>97
<span>2009-02-14</span>98
</dd>99
</dl>100
</div>101
</body>102
</html>