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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ v0 y8 i7 n6 h' J9 m0 p+ x- Q　　
4 f3 {. c: Q  n# P% D　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。9 Y. b& T% M/ o7 z) H4 g7 W

! E7 q% H" C! O5 [* x9 _$ j% N　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
) i2 g" t) N* N( n; g" Z& {- \' H! B, N/ `& i3 Y
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
4 [) q6 w4 b1 m( o# Y  A+ k1 F
  p- p( w0 q4 N; \6 u" U1 r7 G$ n　　 〈tr〉1 `; }1 G1 M7 n% ^

- Y: O" m  G/ c  k3 P* _& q　　 〈td〉
- c4 N# V9 h# I3 p0 h0 Q6 w7 S$ K) @
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
- I& f$ x, j. h, [  m
# V. I2 s5 D# T' ]: f- x　　 〈tr〉) f& J) ]) V1 }* r  U6 l
; L: r; L) n& z# y, h: F
　　 〈td〉6 v0 @7 R: `* B1 _; A

, T; L- A2 S3 a) t* u　　 〈/td〉$ A: L; l' b' v! L

! }3 j6 R3 M% A% H# N0 Y+ j: L　　 〈/tr〉
/ o7 S  z! g8 W; o. O9 K0 ~; A
$ t) }, J; u% W6 `: r　　 〈/table〉
, O& h0 o! K5 Y9 e3 l+ r; N( f3 l+ p- a# P: U2 S
　　 〈/td〉: o, W8 d  d9 H! {! ~" ~" s$ a" @

; {' }' H: |7 E" X) j1 f% U5 J; I　　 〈/tr〉
: D  ~6 ?* ^# R& N" |( w7 z+ O, {, U; @0 V  C% C# j
　　 〈/table〉9 z7 ?  O2 m! x$ B
  c6 |0 t4 S; A( I: H$ L; L
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
7 K* n" R9 `5 ]( H1 x4 Y0 o# x! ~% {; Y  G7 b. b* e
　　源代码如下：
9 G, P0 M4 l$ Q  Q+ [  \# e) t: |$ c8 @+ E3 J& I
　　〈table border="0" bgcolor=white〉
9 Z( a4 L  b# I" w9 P. i" k: v% v6 B: I3 ?. r! q) [, b
　　 〈tr〉
4 U; O6 w) ^2 c6 `* P7 }+ m& b1 I6 ?5 C+ |
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉" H1 E, m7 N" g4 G

+ W' B/ v4 t! a' X" o　　 〈/td〉
3 K& c6 [0 U$ x) X
7 J. i" Z. m  B8 Q, h; N2 T3 x, M　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
" m2 X7 I$ X# A3 l, o3 ?) F) Z" v+ `3 y2 m# l. g! b: g
　　 〈/td〉6 D4 i; z3 m' r

2 N9 y5 E% h/ y* j　　 〈/tr〉
3 D# ?# {  I1 X' F4 C! t  T0 [" B5 r6 o* G. L  V" b. P
　　 〈tr〉
1 c) A# @6 Q2 S
  b9 g& _& M5 c6 ]/ D! F6 N( l　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
- _, p; r) k& C! \: z; x$ [
4 M: g" f2 E3 @# d$ O　　 〈/td〉9 b  T; ^+ I4 H7 x7 O  y, k6 c: ^1 A4 G

! _( {/ G- q9 P) K# V. v4 D　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉2 i, @" S1 c/ s0 e9 i
1 G1 z+ j. i% H4 n! Y
$ P" O5 K. a) G3 G3 c+ Z$ Q, A% G
　　 〈/td〉7 M" K2 f2 w8 O  Z9 `- r/ E
! G$ U" N2 j6 {6 u8 C2 _% x, z
　　 〈/tr〉1 X/ b4 s' [* u( a5 z

0 d. u( z4 s# N0 n' Q　　〈/table〉

晴天再现

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