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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 {, K% F7 g  X6 w9 v　　
2 E7 o4 z: F3 I7 O: A3 M& L　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。: w: k4 `4 k* c

7 J& d9 ?5 o8 E' c7 I! {6 v' ~　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：* C/ S4 Z7 X- g/ t! c# Y
5 o* o- I5 D- P' y
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& H# w" S1 y& U3 l4 }& m

# ]7 b1 R1 h1 J) M3 c　　 〈tr〉3 y# V7 E" ~9 @6 ^
+ ~5 z  v2 h9 C& A
　　 〈td〉7 d) R1 r  {9 F
- _) _! X. \& l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
+ K; i; t% }+ r5 g+ R& l: F' Q: H: f) j9 T- `
　　 〈tr〉
1 G2 ?3 z) J' S- P! U
! \; e+ t; x6 H. O# X　　 〈td〉7 \  [9 @/ K2 K) w7 Z7 ^0 ^

% O4 x7 H* l7 H& L9 b　　 〈/td〉" j& m& c2 @+ f8 X) n
* T* T9 r) H1 Z5 y% q, A/ F/ g  N
　　 〈/tr〉8 _0 {2 G( q- g5 M
# C4 R( O& s  J6 k# w$ d
　　 〈/table〉
, N  K# H& Q" S, S0 ~1 \8 o4 H0 C8 J. u7 ^/ z
　　 〈/td〉% j- J9 ~* D" R; @
$ M! C. Y  D2 W* m4 v/ [. o2 e
　　 〈/tr〉
- |( ~( O. R7 X9 G, ?7 Q2 i! Q+ ~) Y7 Z) d% k
　　 〈/table〉
/ b" Q! d' f7 o! p: w# b
% [. d8 R9 h5 f　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( u4 Y8 ]- [, z0 U) Z  N( }7 o. |& w% Y" \6 w7 r
　　源代码如下：
* E0 Z( z8 L8 I; S( \$ t
( W1 ~8 v+ n* [- I  p9 y) Z　　〈table border="0" bgcolor=white〉
2 n- m, I6 e6 E. A. y  P% w: J' P* B; G4 x7 Q  s; B9 L- K. }
　　 〈tr〉
8 \  G# d1 h) b; G2 Y; a2 c1 W- t  R) I+ E5 |' T
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉- O+ E; h$ w& s5 d* p2 E
; r, ?9 m- y: Z5 l: P/ Z, d
　　 〈/td〉
9 u3 h# m' x6 s4 o" j6 k( N& h% ^9 X. a9 i4 D9 j5 I8 j
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: S+ Z5 R! r+ A& h. I) M9 k- ~6 T! V; J
　　 〈/td〉
9 o7 L+ e7 n" V. }' f7 e' ]1 c6 \" i0 @
　　 〈/tr〉
5 w- O. e5 g0 ^0 @- _  c. u% t8 v0 U4 ?$ y) r# V0 Z- l
　　 〈tr〉
: G& S1 _2 i5 I( A/ u6 @; ~* n7 _1 u) f. A% c6 ]
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉; Y* o6 P: j0 }+ W$ d# ?% b" R1 A. ?
( A* V1 n" _* h; X
　　 〈/td〉) @2 B- a) B8 X

. U7 z4 M$ S/ ^' {, n, {: [　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉) x4 h# o$ k2 Y8 V7 \" L

7 q/ ?4 {5 ~8 B% Y- ?3 N# b$ P6 l/ G; j6 m+ \
　　 〈/td〉
) A7 a; L% _* L1 H) z% G+ _. y% Q
　　 〈/tr〉( Y7 i8 e2 _% F* c; }

) R& w1 k( L* a/ w　　〈/table〉

晴天再现

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