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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ Q5 t9 G. [7 U& T  X$ E　　
" w4 H, i) n4 l6 y* p7 D3 I2 }0 {　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% j- d7 x) a5 x* S
% X: t9 n9 j$ j& k$ e, D
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' m& Q5 i, f# w3 K5 O( w3 i- U3 Y9 Y3 h: G
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
( Y! ^) k& X/ F1 K; i. y9 J/ @
# I! n5 {# V: @5 H) H' r+ a　　 〈tr〉, f6 J9 H6 U: T5 i
' r7 T, R8 l* T( J/ U; @, @1 m
　　 〈td〉
! U  C- c% d7 e9 t# A. G5 Z! W8 M
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; |0 D7 d& A  `' O- ], s8 z8 ]. ~+ S7 Y- Q9 O* C2 I0 r6 D
　　 〈tr〉
* T6 Y; T! _, q# o' j! e7 [2 U3 E! x6 D
　　 〈td〉
8 |* `$ l1 @$ _; S' m, f9 A5 C- w( m3 v5 A0 v6 Y' b7 J3 x
　　 〈/td〉+ m, h, o* t, Y2 `
/ S& a6 \# \4 N; `5 {6 ~
　　 〈/tr〉
  O1 U6 M8 t4 o& I% L  d
5 q8 S! x6 T/ y" d. E　　 〈/table〉. ^. a. \$ E1 ~6 }
1 T. `  D* X# [" n1 p$ q
　　 〈/td〉
+ u# [' i4 a* r% [  }0 n+ s  W( I& U6 u9 |8 M9 j$ E/ Y# ]
　　 〈/tr〉- E/ ~7 H* X( N/ a! D4 i/ D
% B* U9 i9 P0 r6 O$ \# _# C
　　 〈/table〉7 m5 x' ^( M" j

4 S# q% Y1 R) x　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
% Y3 ]5 f' Q& g
! ?# j8 l) `7 `5 L. H8 i4 Z　　源代码如下：
( R# t# k" [4 l* m- V/ m$ b& p# l" ^8 N5 s+ A
　　〈table border="0" bgcolor=white〉2 S& S3 ~5 p. n! y
: w1 N, @- |" H0 Y0 \/ z
　　 〈tr〉' r; r! I5 ]( g5 u, F7 C

: Y) l( W# T- I" n4 V0 x　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
# R' s6 w; O7 M; U1 Z- H1 a$ Q7 v0 }8 H
　　 〈/td〉9 J( ?+ Q+ s, c! k  ~
) F! p5 ~6 I. I1 @1 j' V6 p2 o
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
( z" k" w1 N* P+ j+ O
1 N# d/ ~0 w% x, ], u8 d# Y　　 〈/td〉; C2 h  g! C9 _# h8 I: P. u

% R7 P2 D/ b# X) \　　 〈/tr〉8 \; @, s2 e% C3 S- f
) [/ _) E% \6 ^
　　 〈tr〉6 ~' I. O$ q% u9 S( [: n
  ~) V4 u& L4 ?
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉+ P& G$ a8 R" Y5 q3 p

4 n3 P, P: Q4 u* }- s( U9 V3 I　　 〈/td〉, x* u) {5 w6 a) Z: _9 q2 ^
7 h. s( @* M6 w) _& S' v( p
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
: {+ w( c1 q! V, H
6 E4 r9 u6 J! D) i( L
1 h' c! e6 n6 R+ k, ~, l' [/ K　　 〈/td〉; N% ]% c) t+ T2 {) A! K0 y, z

9 ~* D& V6 T4 O" G　　 〈/tr〉8 [* C8 s! X6 v( a5 m
% o0 E+ h( |5 L/ K2 C  d  `- [
　　〈/table〉

晴天再现

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