css 表格和层的虚线的用法(兼容各浏览器IE8可以)
文章来源：365jz.com 点击数：579 更新时间：2009-09-18 10:17 参与评论
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6<title>关于我们</title>
7<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
8<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
9<meta name="Robots" content="all index follow ">
10<meta name="Author" content="涂聚文" />
11<link href="images/css.css" rel="stylesheet" type="text/css">
12<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
13<link rel="icon" href="favicon.ico" type="image/ico" />
14<link rel="Bookmark" href="favicon.ico">
15
<style type="text/css">
16
/*URL: http://www.dusystem.com/ */
17.shadow{
18
border:1px solid silver;
19font:10pt arial;
20position:relative;
21display:inline;
22background:white;
23z-index:100
24
}
25
26.shadow_inner{
27overflow:hidden;
28position:absolute;
29top: -1000px;
30filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
31opacity:0.1; /*firefox 1.5 opacity*/
32-moz-opacity:0.1; /*mozilla opacity*/
33-khtml-opacity:0.1; /*opacity*/
34z-index:10
35}
36
37</style>
38
39<script type="text/javascript" src="js/shadow.js"></script>
40
41<style>
42<!--
43img.test1{
44 border-style:dotted; /* 点画线 */
45 border-color:#FF9900; /* 边框颜色 */
46 border-width:5px; /* 边框粗细 */
47}
48img.test2{
49 border-style:dashed; /* 虚线 */
50 border-color:blue; /* 边框颜色 */
51 border-width:2px; /* 边框粗细 */
52}
53-->
54
55.table1{
56BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED
57}
58</style>
59 <style>
60.v {border-collapse: collapse}
61.v td{border:1px dashed #000;width:100;height:25}
62</style>
63
64
65</head>
66
67<body>
68
69<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>
70
71<img src="http://www.dupcit.com/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />
72
73<p><a href="http://www.dusystem.com" class="shadow" rel="green">Some link</a></p>
74
75
76
77 <img src="banana.jpg" class="test1">
78 <img src="banana.jpg" class="test2">
79
80 <table class="table1" border="1">
81 <tr>
82 <td> </td>
83 <td> </td>
84 </tr>
85 <tr>
86 <td> </td>
87 <td> </td>
88 </tr>
89 </table>
90
91
92<table class="v">
93<tr>
94<td>demo</td><td>demo</td><td>demo</td>
95</tr>
96<tr>
97<td>demo</td><td>demo</td><td>demo</td>
98</tr>
99<tr>
100<td>demo</td><td>demo</td><td>demo</td>
101</tr>
102</table>
103
104 <form name="editorForm" method="POST">
105 <!-- 编辑器容器 -->
106 <div class="bd01" id="edt"> </div>
107 <!-- 结束-编辑器容器 -->
108</form>
109<div style="border-right:1px dashed red; height:200px; width:100px;
110">缔友计算机信息技术有限公司右边的border-right：1px ，solid， red；
111左边的border-left：1px ，solid， red；</div>
112<p style="border-style:dotted;border-width:0px 0px 1px 0px;
113">缔友计算机信息技术有限公司</p>
114<p style="border-style:dotted;
115">缔友计算机信息技术有限公司</p>
116<div style="border-left:1px dashed red; height:200px; width:100px;
117">缔友计算机信息技术有限公司右边的border-right：1px ，solid， red；
118左边的border-left：1px ，solid， red；</div>
119<p style="border-bottom:1px dashed red;
120">美国第二季度生产率出现6年来最大升幅
121By Simone Baribeau in New York 2009-08-12 </p>
122<table>
123 <tr>
124 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
125 <!--左侧区域-->
126 <p> </td>
127
128 <td style="width:47%; padding-left:15px; vertical-align:top">
129 <!--右侧区域-->
130 <p> </td>
131 </tr>
132 <tr>
133 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
134 <!--左侧区域-->
135 <p>The productivity of US workers rose at its fastest pace in six years in the second quarter as employers cut staff costs, according to the labour department.</p>
136
137 </td>
138 <td style="width:47%; padding-left:15px; vertical-align:top">
139 <!--右侧区域-->
140 <p>美国劳工部的数据显示，由于雇主削减员工成本，美国第二季度生产率出现6年来最大增幅。</p>
141 </td>
142 </tr>
143 <tr>
144 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
145
146 <!--左侧区域-->
147 <p>Analysts said the higher-than-expected 6.4 per cent increase in productivity was another signal that the US economy might be emerging from recession – one that helped free the Federal Reserve to pursue aggressive monetary policy.</p>
148 </td>
149 <td style="width:47%; padding-left:15px; vertical-align:top">
150 <!--右侧区域-->
151 <p>分析师表示，生产率高于预期的6.4%的升幅，是美国经济可能正走出衰退的又一信号。这有助于缓解美联储的担忧，使其得以推行激进的货币政策。</p>
152 </td>
153
154 </tr>
155 <tr>
156 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
157 <!--左侧区域-->
158 <p>“The worst is over. Firms should now be able to consider keeping their workforce constant,” said Joseph Brusuelas, director of Moody's Economy.com. “Perhaps more importantly, the efficiency gains bode well for a more stable inflation environment, giving extraordinary comfort to the Fed as they consider monetary policy.”</p>
159 </td>
160 <td style="width:47%; padding-left:15px; vertical-align:top">
161
162 <!--右侧区域-->
163 <p>穆迪(Moody's)旗下Economy.com网站主管约瑟夫•布鲁修拉斯(Joseph Brusuelas)表示：“最糟的时候已经过去。现在各公司应该有能力考虑维持劳动力的稳定了。或许更重要的是，生产率的上升预示将出现一个更加稳定的通胀环境，让美联储在考虑货币政策时有更宽松的余地。”</p>
164 </td>
165 </tr>
166 <tr>
167 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
168 <!--左侧区域-->
169
170 <p>Analysts surveyed by Reuters had expected productivity to increase 5.3 per cent.</p>
171 </td>
172 <td style="width:47%; padding-left:15px; vertical-align:top">
173 <!--右侧区域-->
174 <p>接受路透社(Reuters)调查的分析师曾预测生产率将上升5.3%。</p>
175 </td>
176 </tr>
177 <tr>
178
179 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
180 <!--左侧区域-->
181 <p>Hours worked fell 7.6 per cent, but output decreased only 1.7 per cent. Over the past year, falling hours and output has led to an increase of 1.8 per cent in output per hour.</p>
182 </td>
183 <td style="width:47%; padding-left:15px; vertical-align:top">
184 <!--右侧区域-->
185 <p>第二季度工作时间比第一季度减少了7.6%，但产出仅下降1.7%。在过去一年里，工作时间和产出的下降致使每小时产出增加了1.8%。</p>
186 </td>
187
188 </tr>
189 <tr>
190 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
191 <!--左侧区域-->
192 <p>“As a pattern, productivity is holding up very well in this cycle, which tends to bode well from a long-term growth perspective,” said Alan Ruskin, chief international strategist at RBS Global Banking and Markets.</p>
193 </td>
194 <td style="width:47%; padding-left:15px; vertical-align:top">
195
196 <!--右侧区域-->
197 <p>“本轮经济周期中，生产率整体保持得相当良好，这往往是长期增长前景的吉兆，”苏格兰皇家银行(RBS)环球银行及资本市场部首席国际策略师阿兰·鲁斯金(Alan Ruskin)表示。</p>
198 </td>
199 </tr>
200 <tr>
201 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
202 <!--左侧区域-->
203
204 <p>Wages continued to fall in real terms. Taking into account inflation, compensation in the second quarter fell 1.1 per cent. But excluding inflation, non-farm business pay rose 0.2 per cent in the second quarter, compared with a 2.4 per cent decrease a quarter earlier.</p>
205 </td>
206 <td style="width:47%; padding-left:15px; vertical-align:top">
207 <!--右侧区域-->
208 <p>实际工资继续下降。计入通胀因素，第二季度薪酬水平下降了1.1%，但若不计通胀因素，第二季度非农商业薪酬则增加了0.2%，而上一季度是下降2.4%。</p>
209 </td>
210 </tr>
211 <tr>
212
213 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
214 <!--左侧区域-->
215 <p>“Many workers are experiencing wage freezes and taking pay cuts to keep their jobs, one of the risks to the recovery going forward,” said Mr Brusuelas.</p> </td>
216 <td style="width:47%; padding-left:15px; vertical-align:top">
217 <!--右侧区域-->
218 <p>“许多工人的薪水遭遇冻结，或是为了保住工作被迫接受减薪。这是影响经济复苏前景的风险之一，”布鲁修拉斯表示。</p>
219
220 </td>
221 </tr>
222 <tr>
223 <td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">
224 <!--左侧区域-->
225 <p> </td>
226 <td style="width:47%; padding-left:15px; vertical-align:top">
227 <!--右侧区域-->
228
229 <p>译者/管婧</p> </td>
230 </tr>
231 </table>
232
233</body>
234
235</html>
236
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">4
<head>5
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6
<title>关于我们</title>7
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">8
<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">9
<meta name="Robots" content="all index follow ">10
<meta name="Author" content="涂聚文" />11
<link href="images/css.css" rel="stylesheet" type="text/css">12
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />13
<link rel="icon" href="favicon.ico" type="image/ico" />14
<link rel="Bookmark" href="favicon.ico"> 15
<style type="text/css">
16
/*URL: http://www.dusystem.com/ */17
.shadow{18
border:1px solid silver;19
font:10pt arial;20
position:relative;21
display:inline;22
background:white;23
z-index:10024
}25
26
.shadow_inner{27
overflow:hidden;28
position:absolute;29
top: -1000px;30
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/31
opacity:0.1; /*firefox 1.5 opacity*/32
-moz-opacity:0.1; /*mozilla opacity*/33
-khtml-opacity:0.1; /*opacity*/34
z-index:1035
}36
37
</style>38
39
<script type="text/javascript" src="js/shadow.js"></script>40
41
<style>42
<!--43
img.test1{44
border-style:dotted; /* 点画线 */45
border-color:#FF9900; /* 边框颜色 */46
border-width:5px; /* 边框粗细 */47
}48
img.test2{49
border-style:dashed; /* 虚线 */50
border-color:blue; /* 边框颜色 */51
border-width:2px; /* 边框粗细 */52
}53
-->54
55
.table1{56
BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED57
}58
</style>59
<style>60
.v {border-collapse: collapse}61
.v td{border:1px dashed #000;width:100;height:25}62
</style>63
64
65
</head>66
67
<body>68
69
<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>70
71
<img src="http://www.dupcit.com/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />72
73
<p><a href="http://www.dusystem.com" class="shadow" rel="green">Some link</a></p>74
75
76
77
<img src="banana.jpg" class="test1">78
<img src="banana.jpg" class="test2">79
80
<table class="table1" border="1">81
<tr>82
<td> </td>83
<td> </td>84
</tr>85
<tr>86
<td> </td>87
<td> </td>88
</tr>89
</table>90
91
92
<table class="v">93
<tr>94
<td>demo</td><td>demo</td><td>demo</td>95
</tr>96
<tr>97
<td>demo</td><td>demo</td><td>demo</td>98
</tr>99
<tr>100
<td>demo</td><td>demo</td><td>demo</td>101
</tr>102
</table>103
104
<form name="editorForm" method="POST">105
<!-- 编辑器容器 -->106
<div class="bd01" id="edt"> </div>107
<!-- 结束-编辑器容器 -->108
</form>109
<div style="border-right:1px dashed red; height:200px; width:100px;110
">缔友计算机信息技术有限公司右边的border-right：1px ，solid， red；111
左边的border-left：1px ，solid， red；</div>112
<p style="border-style:dotted;border-width:0px 0px 1px 0px;113
">缔友计算机信息技术有限公司</p> 114
<p style="border-style:dotted;115
">缔友计算机信息技术有限公司</p> 116
<div style="border-left:1px dashed red; height:200px; width:100px;117
">缔友计算机信息技术有限公司右边的border-right：1px ，solid， red；118
左边的border-left：1px ，solid， red；</div>119
<p style="border-bottom:1px dashed red;120
">美国第二季度生产率出现6年来最大升幅121
By Simone Baribeau in New York 2009-08-12 </p> 122
<table>123
<tr>124
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">125
<!--左侧区域-->126
<p> </td>127
128
<td style="width:47%; padding-left:15px; vertical-align:top">129
<!--右侧区域-->130
<p> </td>131
</tr>132
<tr>133
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">134
<!--左侧区域-->135
<p>The productivity of US workers rose at its fastest pace in six years in the second quarter as employers cut staff costs, according to the labour department.</p>136
137
</td>138
<td style="width:47%; padding-left:15px; vertical-align:top">139
<!--右侧区域-->140
<p>美国劳工部的数据显示，由于雇主削减员工成本，美国第二季度生产率出现6年来最大增幅。</p>141
</td>142
</tr>143
<tr>144
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">145
146
<!--左侧区域-->147
<p>Analysts said the higher-than-expected 6.4 per cent increase in productivity was another signal that the US economy might be emerging from recession – one that helped free the Federal Reserve to pursue aggressive monetary policy.</p>148
</td>149
<td style="width:47%; padding-left:15px; vertical-align:top">150
<!--右侧区域-->151
<p>分析师表示，生产率高于预期的6.4%的升幅，是美国经济可能正走出衰退的又一信号。这有助于缓解美联储的担忧，使其得以推行激进的货币政策。</p>152
</td>153
154
</tr>155
<tr>156
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">157
<!--左侧区域-->158
<p>“The worst is over. Firms should now be able to consider keeping their workforce constant,” said Joseph Brusuelas, director of Moody's Economy.com. “Perhaps more importantly, the efficiency gains bode well for a more stable inflation environment, giving extraordinary comfort to the Fed as they consider monetary policy.”</p>159
</td>160
<td style="width:47%; padding-left:15px; vertical-align:top">161
162
<!--右侧区域-->163
<p>穆迪(Moody's)旗下Economy.com网站主管约瑟夫•布鲁修拉斯(Joseph Brusuelas)表示：“最糟的时候已经过去。现在各公司应该有能力考虑维持劳动力的稳定了。或许更重要的是，生产率的上升预示将出现一个更加稳定的通胀环境，让美联储在考虑货币政策时有更宽松的余地。”</p>164
</td>165
</tr>166
<tr>167
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">168
<!--左侧区域-->169
170
<p>Analysts surveyed by Reuters had expected productivity to increase 5.3 per cent.</p>171
</td>172
<td style="width:47%; padding-left:15px; vertical-align:top">173
<!--右侧区域-->174
<p>接受路透社(Reuters)调查的分析师曾预测生产率将上升5.3%。</p>175
</td>176
</tr>177
<tr>178
179
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">180
<!--左侧区域-->181
<p>Hours worked fell 7.6 per cent, but output decreased only 1.7 per cent. Over the past year, falling hours and output has led to an increase of 1.8 per cent in output per hour.</p>182
</td>183
<td style="width:47%; padding-left:15px; vertical-align:top">184
<!--右侧区域-->185
<p>第二季度工作时间比第一季度减少了7.6%，但产出仅下降1.7%。在过去一年里，工作时间和产出的下降致使每小时产出增加了1.8%。</p>186
</td>187
188
</tr>189
<tr>190
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">191
<!--左侧区域-->192
<p>“As a pattern, productivity is holding up very well in this cycle, which tends to bode well from a long-term growth perspective,” said Alan Ruskin, chief international strategist at RBS Global Banking and Markets.</p>193
</td>194
<td style="width:47%; padding-left:15px; vertical-align:top">195
196
<!--右侧区域-->197
<p>“本轮经济周期中，生产率整体保持得相当良好，这往往是长期增长前景的吉兆，”苏格兰皇家银行(RBS)环球银行及资本市场部首席国际策略师阿兰·鲁斯金(Alan Ruskin)表示。</p>198
</td>199
</tr>200
<tr>201
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">202
<!--左侧区域-->203
204
<p>Wages continued to fall in real terms. Taking into account inflation, compensation in the second quarter fell 1.1 per cent. But excluding inflation, non-farm business pay rose 0.2 per cent in the second quarter, compared with a 2.4 per cent decrease a quarter earlier.</p>205
</td>206
<td style="width:47%; padding-left:15px; vertical-align:top">207
<!--右侧区域-->208
<p>实际工资继续下降。计入通胀因素，第二季度薪酬水平下降了1.1%，但若不计通胀因素，第二季度非农商业薪酬则增加了0.2%，而上一季度是下降2.4%。</p>209
</td>210
</tr>211
<tr>212
213
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">214
<!--左侧区域-->215
<p>“Many workers are experiencing wage freezes and taking pay cuts to keep their jobs, one of the risks to the recovery going forward,” said Mr Brusuelas.</p> </td>216
<td style="width:47%; padding-left:15px; vertical-align:top">217
<!--右侧区域-->218
<p>“许多工人的薪水遭遇冻结，或是为了保住工作被迫接受减薪。这是影响经济复苏前景的风险之一，”布鲁修拉斯表示。</p>219
220
</td>221
</tr>222
<tr>223
<td style="width:48%; border-right:1px dashed #ccc; padding-right:15px; vertical-align:top">224
<!--左侧区域-->225
<p> </td>226
<td style="width:47%; padding-left:15px; vertical-align:top">227
<!--右侧区域-->228
229
<p>译者/管婧</p> </td>230
</tr>231
</table>232
233
</body>234
235
</html>236
Tag标签: css
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
- 上一篇：深刻认识form
- 下一篇：css\s special-16个基本css布局
