在网页中实现细线边框的两种方法 页面美化, 边框

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。# X$ ]; M" J/ Q# J3 [, C
　　3 @0 z" @" B' A, N
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。7 P& q# X; Y' E$ M% O% Y/ [% `

4 x. M7 ?: o' U( G) k　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 p4 t, [$ h9 U! D5 Z9 P( K

0 c; |4 k& ?5 L0 f　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
) N" I* X" a" X# s. T. C  |% F) t+ Z. J: Q
　　 〈tr〉
6 h% |8 G/ s+ V% }
3 ]/ ]4 S. o' A. {. _4 y: A% L　　 〈td〉/ v% Z* `/ m0 e2 H# [0 h4 u1 {! o
6 z- O9 W5 e8 C, [
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 m1 m* i+ A$ ~# I
8 ?; }$ v1 I0 B# x3 I) H
　　 〈tr〉) d) K6 T$ X8 G* `- {- w& l' f: U- |

; i7 C6 w7 P3 ~) b　　 〈td〉
& m+ w6 A7 V0 {( ~+ t' r0 `/ d+ c* r% R% D9 r: J, @& a8 @  [
　　 〈/td〉  b( J. W5 b" y. o5 P6 m
) I) O+ u  P+ R! H! T' d/ F6 y
　　 〈/tr〉
: a# o, y, O' }
) L+ n5 C# K) I) B4 B9 b　　 〈/table〉
' S- A+ K6 K3 G1 j3 ~1 l8 M  k* w3 O, x/ v1 J( X+ |
　　 〈/td〉3 j5 L/ @/ b+ c, W7 |% Z
. |" r2 U+ n* C4 L: I
　　 〈/tr〉
) _5 g' S% L! z$ g, R& [+ W* z+ t2 F3 q; `1 u
　　 〈/table〉
7 K4 H* h: G2 T6 G" q
% A: q" A! f4 h+ ^  A: F0 P　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
# j( Z& g" T/ h7 {# {6 ?2 f+ d$ {8 y: t5 ?
　　源代码如下：
( V7 i- H7 H7 p& ]" t+ {6 d: q$ \3 ]3 B
　　〈table border="0" bgcolor=white〉
! I& P/ l5 S# L; c1 O
8 u1 Z. m2 B# @0 s5 n  c# F　　 〈tr〉
8 t2 H4 |7 e" [7 V* p8 j0 ~& f  ~/ G
! p! P) F8 h4 y5 E- \　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉' D3 m: e& S' P& L8 e6 V) A

. n% F, I3 s0 z　　 〈/td〉
" r+ _) T' S  u/ F* y
2 K1 l0 z: V) v1 m, o. _! O8 K　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
' P% o) P% P! ?9 L: d: W- J4 z; }8 t. C
　　 〈/td〉1 t8 A. t# q' a3 f0 ?  _; ]

$ H" U+ Q+ Z* s  N8 N　　 〈/tr〉
6 o4 X9 u; V* f1 J- {
4 m% i- ?4 D5 K3 o( E　　 〈tr〉
* R) v% y: S# y8 q
, o1 }4 `( _+ i" K8 d9 H7 l  t　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉1 D; E, Z; z, j; Q
- p; m) @; S; X; P6 q- A9 [+ H+ t
　　 〈/td〉* p7 ]9 \4 }5 {, b: I
& P5 |' L. [' Z4 l' ^
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉: J1 o4 {; q# e; Y
) L6 P  K. _  Q8 i# W1 n
6 R2 z& x! [  r8 K. n6 D% F
　　 〈/td〉# o6 B. o% |& w

( t5 ~) ^" G+ x$ b　　 〈/tr〉) r; q$ N2 C) n; S- V

% p4 E8 Z3 d! R( T, }* o, u; i$ @　　〈/table〉

晴天再现

挺好的。。。。。。。。。。