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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
. Y1 ^7 U' z! Y& A; l" _　　, j& d8 p3 F* B' v7 G0 c) @# E
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
0 a+ H2 T; c+ @% u
' f; v9 K  h% s0 @4 b' a; ?  N2 t( ]　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：9 h1 l; O# w. k' j' Q4 B

9 C: [  G" s) `  C( }　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
6 w# U5 D3 o1 f& Q) [+ G% v3 z; C3 R0 m# d6 `, T
　　 〈tr〉+ X  A7 P4 p  u/ `# g% C% ?

8 D# ]2 G' {3 |' G% c" w4 l9 F2 f　　 〈td〉
; Z+ O# R$ {% ]7 j7 d: ~( @3 o! l6 A
5 v0 ^8 U: J7 G  Q8 S　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉6 y0 \$ S4 G/ C

( s. b1 J: [$ P5 S* V  p　　 〈tr〉) {3 a" H" O4 x$ s) i
# w2 l8 l' C0 ~  G  B6 Q
　　 〈td〉
' D2 _& \1 y7 ^$ U2 q( x3 }: Z! C- }
　　 〈/td〉" u4 M" Q, H" m: x( D- I
; j/ \2 p- @' \
　　 〈/tr〉
; G6 v2 j/ C; s7 L8 {( f. d$ r5 O* C+ D8 {' Z9 o
　　 〈/table〉  L- s, k: Q+ z9 }2 ?" ^( @

1 c' p4 W2 |2 P& v- }　　 〈/td〉0 b7 P" p: n3 c7 C0 V

6 G0 U# n! g5 ]0 c　　 〈/tr〉
: s$ Q3 h6 J* r/ ]( a/ n( l
; Z! l3 u; s! Q# ^: W# Z　　 〈/table〉% v1 D! ]% Y" o  G" w+ b7 X

# D4 }. U  m; Y( f: P* W6 m　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
$ _+ j  H1 j9 P4 L8 z
, N; z2 r+ m; e( x& Y　　源代码如下：" C8 E1 R7 r9 D  y) Z# F/ H! B
# t) d+ v. }8 l6 j5 \& L. V
　　〈table border="0" bgcolor=white〉
2 S0 m( [. x5 _5 N* ^: m% Z& R- ^: R0 _( p# [+ S% q9 c
　　 〈tr〉3 Q# N( o2 S) X, Q6 n4 r

3 D( X+ N/ n5 i% L' z1 s4 b　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
9 b( t5 C( ^4 Z! j
/ O; y. e1 l; O0 S1 M, B　　 〈/td〉
, c4 _. u) Z& L! S- O
8 L4 E$ _" z5 Q) e: X$ y" W: x　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
7 S  @" u0 W& x6 \  E& C4 x
9 ]1 G% s; f' W7 j* l3 y　　 〈/td〉
" t# f8 O  A3 y+ g/ X
* [4 Q8 c5 w! R! [" p0 O) u( G% M　　 〈/tr〉2 k! x  m# h# ^1 m/ I

; R6 }' n3 `7 @. U- }　　 〈tr〉
. m8 z% n. f7 j: V9 L  d1 `; G6 C
  P5 V+ e) O" x* @, j　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
- b) S" L) p, y' q
: |. D6 _8 v7 a) Y3 J　　 〈/td〉
  d$ x; t- ]' k5 `
. |7 h! V8 P3 O　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
4 ^" i  W# ]& H/ j7 d7 [& E
# d! C& ]2 T+ F
4 U5 [$ `  F+ t: V; u' _　　 〈/td〉7 m+ A  D8 X! }" t
/ b5 R0 _$ P3 N. @5 @# q
　　 〈/tr〉3 s4 G0 Y0 |/ F: |

7 S. v' H5 `& F3 r% m% M　　〈/table〉

晴天再现

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