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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
0 }  N2 k9 W; H; u, r4 n　　
1 `0 V1 ]9 |: p　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
9 f& }; P8 ^) F3 e' j$ ?* [+ x" H7 F7 b. B8 d% K$ Z3 v
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
4 R3 x# l+ j+ s6 Q& _$ k+ B
* B7 w; d; [# g" q  a" h　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉/ e- Y: I  {) }8 k9 C# k, M

& Q" j4 S' Q# V& P+ N# L5 S1 L　　 〈tr〉  K& _& m5 W1 e# ]$ [* g. j4 H% q

7 h7 ~, K$ X" t/ x　　 〈td〉- T% N; |- u; M: `) _
" f4 o/ Y% f, }
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉" v$ ~' O) E5 [* N' n8 {: R! S

/ C: }' C  G' u% r; \/ d2 n: U: O　　 〈tr〉
6 j# c4 y' P9 A! ?! \) k; N
% v' q: a4 c: a. C2 P4 G　　 〈td〉. s& J$ V# d' Y; C) B6 ]7 P# C9 b

2 t6 q: F9 s& r6 T2 d　　 〈/td〉
8 K6 `7 E, g/ L( }: \" g$ a3 I: {+ S1 i# W/ _5 ^
　　 〈/tr〉
" {% T$ Q/ L. `6 @: S+ h) S( Z6 G
　　 〈/table〉
2 h3 Z* W; U7 u5 f8 R$ d5 D( E* L0 v8 I- x2 e- L
　　 〈/td〉% P/ [' ?/ s5 c, l$ b8 P
) c' d9 _) Q% q) }! R
　　 〈/tr〉1 `$ a; ]# K4 Y, K
2 ?1 d/ I, G+ Y/ N
　　 〈/table〉" A5 _" @3 t4 _( e
3 k; K5 U+ q4 H; ?# d
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
- r* B  j* ~. Y) R9 v3 z! H
6 O+ ~% |; J8 L0 k& m) p　　源代码如下：
# J) a: |2 T, `0 B4 ]; y$ {+ ~% [! w' U) a3 p" u3 a! q
　　〈table border="0" bgcolor=white〉
+ f. x( m9 D- h1 P$ ]( v1 p+ ^( x) H' p9 h! W2 {+ X" q  k
　　 〈tr〉
* ]2 i! \( r6 X# f9 O, S9 x- A% n9 E- w. b# I& K; S; [  @
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
  J; h  k) ~" i/ \4 i
' A" z+ V' t, \　　 〈/td〉
" t; k: o$ u0 K  t: A! \3 N
" N, S7 Q- `4 i2 b6 Z" ~　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉! p! X( a* F; k/ i  T# b+ Y1 O
% a9 F/ Q& [- u! l# x" f% g. E; d
　　 〈/td〉! m# D2 }5 ]& v7 o! G9 W

  a6 N) U- g+ p" m6 ]  i5 k　　 〈/tr〉
: a! g2 E# M' p  C( }6 M% o$ ?- P9 Y9 u2 y4 I: M
　　 〈tr〉
9 ?6 _  a2 F" b! s; n
) H: _0 j- Z; Y$ h+ C& i: I　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉3 }, k% ?( v! s1 |4 S. A  T4 |. b, S" z
# k) H! m. ^3 u
　　 〈/td〉% G; x) q% }% x
$ |, X! Z9 t, f0 v6 X
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
  ~1 _; m+ _. f5 u& W, H: Y, k  A' @, |) G
$ q9 R3 d6 G1 ]; R! y
　　 〈/td〉; ^' g, y6 P/ [/ E
7 ~' t6 q! I1 u) s6 l
　　 〈/tr〉: f; O0 z4 A! i0 i

$ ^! ]& i0 C: m$ U1 w, f7 z3 ~. K% S　　〈/table〉

晴天再现

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