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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。5 Q4 y$ f5 y/ ]+ d* I* q
　　
/ C; x5 d) r2 P' X6 O% \& S　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
3 q# n9 l" ~) w9 v. ]7 J( C9 `7 m" a5 }/ w3 I  M
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：1 ]; D. o# E7 |1 j

! Z  W8 z; X  K" Q$ ?　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉0 R! G! ^6 T) c7 l3 w* O  l
5 ]& G6 A3 w6 T4 s. a) f
　　 〈tr〉1 F, \: x& H: _& U- i
1 a* V2 ^7 ~" @/ b: t, d, C! m" }
　　 〈td〉
/ t3 R* ?8 j: v9 O3 \, ]6 R+ f6 J" m1 ?, Q0 W
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& N  ^/ E' I) x- q
0 V+ w  z/ `7 `4 \　　 〈tr〉. t/ X7 C) I/ r+ e

+ t7 m/ T  S& V$ c+ L　　 〈td〉: m5 L8 S( y. T6 E2 V# J$ G

4 S* j6 Z- S4 e: u　　 〈/td〉
, Z6 q/ n1 [0 Q
: S8 Q( Y$ c. l6 B2 {: A; a4 K3 r　　 〈/tr〉8 v' [' E, w5 J) M4 u' o0 x

% b( D. S. d) M* W　　 〈/table〉
- Z3 h8 I0 s: U6 Z, n; L8 |4 f! ?+ V0 g, _3 ?- C, }
　　 〈/td〉. s& w5 X/ w( u1 _
/ w5 [+ z. l& _$ `. j, E  ^) Z
　　 〈/tr〉, R  m0 H8 i6 B9 U5 ?) p8 |
- z7 U) B8 c* l3 u1 ~
　　 〈/table〉
7 z: J; ^% f- [) O5 n4 b6 ]5 a9 q5 A0 K
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。" a6 C: g5 E, N" n! a9 u! r7 N

, M. ~& w" `7 j7 h　　源代码如下：
$ B/ d1 h7 S( @# E: U0 M0 l$ F* X. P; G3 X4 P! ?" @4 c$ h, a# k
　　〈table border="0" bgcolor=white〉! P4 o, p7 b' ]- G7 X

# C! w( w# ]  J5 o9 B6 m- ?1 `' ?　　 〈tr〉
: O* Q: J( c# J$ g- \! r0 h! l9 W
. m) K4 U2 O+ D6 Y　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉- Y, b) f; _7 F2 ^. h7 X4 Y

# k' u+ ^! u9 w% G" y" W4 T　　 〈/td〉* ~: Q$ s% C/ I' r" S8 F
- O- ]/ n% n8 Y* |' l$ `
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
  H2 ?: v6 O6 n$ I  X+ P$ }. }5 l& j# F5 S/ x/ h5 l. {
　　 〈/td〉$ d( p6 k' v0 V! Y1 k% X% ~! c

/ X1 n, U3 x6 l; h, J. H　　 〈/tr〉1 {" u; u- U9 I: l9 X! J4 v/ ?
2 q- f& ~6 Y3 ^( ]
　　 〈tr〉
+ o9 }, Q$ h  _; s% k- ^
" r4 [7 @  T* \6 b) f　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
0 c- ^+ U9 S( M9 x+ N
$ ]/ x; g6 q. j1 D( X1 Q9 f: B3 z　　 〈/td〉
- c8 }5 m- z7 L/ ]$ W
3 {; ^, {9 S/ @3 m　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
; s  p7 N$ S5 v& Y9 u; e- ]0 _: d
6 f1 F9 ^2 N7 R/ T1 m% [0 r/ u& I5 W
　　 〈/td〉
: M$ k6 i' H5 r& Y( T% o4 j4 s# J3 j4 t6 d2 U$ L1 V# c/ P
　　 〈/tr〉
3 ?+ E& a) N$ ]6 h, o0 M2 `% n) P) e" Y2 I, j2 e- L
　　〈/table〉