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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。$ L4 Q5 B) S" J
　　. w& k! c/ W# S* F& C( F  ~+ K
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。& d7 s- O3 w0 A

0 Y" h# b/ @8 K7 b' K! x* E4 f　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
  O" k  S0 ^3 b" z, g& O, R
0 R7 Y0 s0 n9 q) p  M6 I; n　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉( e8 q$ x/ W7 ?5 e% H0 T
. @; V  e/ R, s$ Q. Q. S! ?
　　 〈tr〉
6 M- p% ?4 v5 p' B5 X7 ^% }
- T8 p: K5 I7 Q% y　　 〈td〉* q3 V0 j" Q0 D
+ }. g# v! x; c5 W7 z
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉' h) T- R9 v+ G, B* V. m) N. Q( r
$ b$ \7 [( z9 c- ]2 |' ~
　　 〈tr〉3 D7 A# Z9 r9 o+ c6 @% r1 h$ u
, l" P7 p" Y! R. v( {
　　 〈td〉
7 l9 I2 n7 {4 t
5 B# i) y1 X* x. w; z- x5 T! {' a　　 〈/td〉$ m) @, z- M" d) m# B! G

( F# Y$ }  y3 s　　 〈/tr〉
' K! [1 F, V% W' q8 j* O, P2 E9 j  w. K) l* n( {3 P2 e
　　 〈/table〉1 ?3 |! S; ?3 J& d  q

: u1 m0 ^( o- ]- v　　 〈/td〉6 A" L! s* ?1 X6 ~! N) `7 _2 k
, S+ s) U" d" Z  |
　　 〈/tr〉
1 q+ A- G8 I0 a8 H- C' ~& o3 M$ t) L% I  V! @7 ^4 T3 n, U
　　 〈/table〉: Y8 B! {. V" [5 Q( x5 k$ O& d
& o0 C6 U3 C# h( _# H9 a, f
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  i- G  T4 X( Z  d
* G" L% k0 |3 B0 ~3 K! x& T
　　源代码如下：
, n" O; X1 o- e* {9 [  J+ @7 i1 q% D) D4 f( c- T7 B3 w7 a
　　〈table border="0" bgcolor=white〉
1 p( v- p" o0 u: I; M
* ^. N$ N) S" Y* ~# M, y2 k　　 〈tr〉, K1 ?+ q; E& L& @

6 ?; m! C7 M7 {9 }6 T% d& r: E　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
# |/ A: |6 Q. [1 A' y9 c$ q; B4 s
　　 〈/td〉# f  y9 V) y: _2 @" ^& b2 @
, D* c  }9 P6 s* n9 c. U" C
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
. Y! E. _0 ?9 n
  M, p& z! I$ d- I! N. J3 z. T　　 〈/td〉0 t2 g/ [9 z7 t3 e
) o, p- {1 U+ u) C& J) N
　　 〈/tr〉" X/ e* @9 N% t) p& y" L

- M" V) F1 B/ T0 p/ s9 h! n　　 〈tr〉
5 i! [( a! o" O  V# U
* `2 j  H: e6 h; L% B; ~　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉0 V/ j0 [+ N. O' x8 Q) R
2 x, O. _6 @9 Z# L' Q- j
　　 〈/td〉
, d6 g3 o% S- R1 z9 a3 k( ~, x3 J* M& A0 q3 ]! x
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
, Z5 _1 M- e" P
! q: X1 u5 p" B
; F( B: E/ g0 a0 _3 U　　 〈/td〉
0 }) z3 O( }: D; v" \8 i! v  y! Y
  T5 m7 J  K/ x0 m; `% o, @　　 〈/tr〉7 g7 Q8 T; I+ I
, [1 [1 C" C* W
　　〈/table〉