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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
) y5 t5 c" x4 u/ k/ }$ e　　
$ f+ |9 u9 G, I　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。4 J+ I- I9 ]- o5 [

) O/ s4 E9 N- }  a$ h( _　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
) t9 |5 L+ S' c& ]; d" h4 @- a4 f0 D
5 ^5 _( G# P( e  ]/ V　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉, R: D" e) [/ N2 ~6 _. m$ ^2 S
6 Z2 r8 b! C$ a* E  s
　　 〈tr〉4 _7 |% A' r* s! \5 P

2 [; D9 N& q; E9 z7 [0 e) p9 D0 m　　 〈td〉6 P* I' o6 q& D. A5 [5 l

8 }1 t, Y1 z; V7 K; L# V1 H0 R7 A　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
+ K& W5 ]' z  D0 t' _6 A+ n5 d! D$ t% I' D; v
　　 〈tr〉6 Y# J0 F: B- P1 X0 T- M3 ?$ O
; j2 V4 `) R" w  i
　　 〈td〉( w# E7 o) _, `2 F5 L
7 g) o5 T: ]$ R$ h1 s
　　 〈/td〉
. Z' C( y, |* v2 i* F5 N; S
6 A5 b  V3 o& o  e3 F　　 〈/tr〉
+ R$ Q$ v0 @7 w# |9 e4 v# C
* g  {4 R+ ?# ]3 @　　 〈/table〉
1 w  u0 ?. u5 \7 C7 W3 B- |8 A: u+ R: d8 Q: N; f
　　 〈/td〉, N  E6 |. r) ]1 i( r
3 P) B, F; D% Z( W  `) o
　　 〈/tr〉% |$ y) e5 D% ]- t- ?! y

! U1 R9 r7 l4 m+ H* c/ H　　 〈/table〉
* t# G/ F7 L1 V1 N9 x8 l" o: H; R) x) Q' y" @- R
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
# ?! |( F& H: d% s
: N# F! M$ a3 f, e& g! K3 |　　源代码如下：
1 d; _* Z! ?2 q/ G
' z# x. r( ?8 j5 d　　〈table border="0" bgcolor=white〉
. r, s. J: i5 h6 S& z" r. _% f, z0 V3 L( U  G( |' y& s
　　 〈tr〉
) b* w  H+ d& D! g
9 [9 v* S. A$ h4 a1 r, g; j　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
* |0 I2 b* y" \7 s: ]# g( O* j
/ c+ _5 g+ F6 q/ ]5 C; @0 e# }7 u　　 〈/td〉
8 D5 Z& I  B  W) w9 [) a) Q- J" C! L
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉. W4 \4 ~" d+ Q! y% C
1 R/ K  o& h# m  J( G0 E% v
　　 〈/td〉+ ^7 @& A; |* q+ M1 \

! S# L& j' a/ W　　 〈/tr〉
9 Z: s( K1 R% I4 X, s! h- ~/ t) z+ W  `
　　 〈tr〉
9 D$ l0 C% W- D, d- z' z2 ?# J1 k9 P% l( I& D+ U
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& U+ e4 I" y/ Q0 W1 T2 K( i3 e/ I8 N0 U0 y  `1 u
　　 〈/td〉' `; q2 c- S6 @$ e5 z8 \/ S

' g3 e- [* _2 I# ^: C  U; A' H0 w7 H　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
  ]4 I# d; B5 U: a8 z- J$ L- f. h1 @& u( P: g% j

* Y/ ?. Z+ I5 @　　 〈/td〉
- Y7 K" E8 L- M$ }6 M" N( }$ R4 y  N! W& j
　　 〈/tr〉
; b) t8 O  W. W+ N7 \+ x* i
7 D8 l( ?. Y) X# `　　〈/table〉

晴天再现

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