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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。" u$ n3 \) Z. c: r+ Y% x  d2 q% s
　　
- b* H- ]4 u" h* i8 I: d( r2 p) n0 s　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
: q5 o+ u2 ^9 b4 ?
( n- Y8 k: K2 {+ L/ b; A9 h( E　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
4 j; Z+ I; T- [& Q) a- \# U( G; N3 h0 N, k
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
- U& H- J5 E3 X+ ^) W6 F4 U* n& V  H' W0 Q9 q2 |
　　 〈tr〉
3 K' i( M3 Z! i* w$ v5 f
/ m( o% l( _% O0 N　　 〈td〉
) V( L4 B- c9 v$ q5 c0 ?- h$ G1 v1 U) g5 ~) `
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
7 |* S7 _; \6 S7 }" b
% c! [: z' F: V$ E4 o　　 〈tr〉, M3 v# t7 I9 u3 y! ?
7 ?0 f! x4 ~3 _4 V
　　 〈td〉; s  b  M0 v: ^1 Z3 s

! R4 o/ T* e  g　　 〈/td〉
  p* i) [  ~- ~; D* ~1 V  ~
& Z$ {3 L) y  l3 f7 a　　 〈/tr〉/ m3 G8 S- i+ T  w6 C) ^
5 l- \6 M; |. X. B7 o5 z2 t
　　 〈/table〉/ |8 X( L& b6 h4 A

* L1 L" I+ G8 i- m- P$ l& J　　 〈/td〉
: u) h+ b! d& K
& O' Y2 z3 A9 D, j. f! A　　 〈/tr〉/ l7 K7 s1 [  I
; A7 _3 `: q% v9 D, x  N
　　 〈/table〉+ D8 i' {7 U+ @, n

% W0 `3 p9 f& h9 o　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。7 R6 }0 J, v6 B2 s# _8 c* E

2 t  H+ c$ R9 f3 K7 ]　　源代码如下：
  x# F. ]3 b/ W8 R, O7 Q0 f
, d4 p) ~' ?5 g# t5 E6 Z. `　　〈table border="0" bgcolor=white〉8 e  v) m4 X' L+ s* x4 g0 {

2 P) V1 ^9 s! P　　 〈tr〉
4 H; y. b, Y/ z: ]/ x4 b! ~" y$ t8 f- ~4 c$ e! m1 L1 a# n
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
1 n" K8 c# Y5 J+ U7 H+ b  L' P
, D1 {! [) E! f( F* v3 U3 y/ \　　 〈/td〉
* p+ z1 D/ {8 v8 [2 M& y% t  W7 w" x
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉7 U6 I9 M+ s) ~2 ~

1 V3 ]! w1 Q) Z& s5 a0 T　　 〈/td〉
! m- c% [9 K: V( x. ?: H3 p
  X5 j# k1 ^9 H5 V; l　　 〈/tr〉
8 f) w$ Q" l, K7 A, T. P  O
; A; P! n. C  _$ m6 F　　 〈tr〉
* r2 C8 g$ z: w: Q( y- K" ~4 n  b. ~7 h# n1 h, F& n
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: O: e4 A1 l! ~) C  o
8 O$ L7 p; t: N! ]/ w, F, v　　 〈/td〉
/ J: k* O  V7 r# X; M3 H
+ w# s' P7 D& E5 i　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉) P0 S" Y6 ]- i6 J0 L
+ p: I1 Q- s, W) B2 D- Z
6 G9 g- `( I) `+ Y! u, Q
　　 〈/td〉0 b; \, y* i/ v, p) n! |. p

+ x* i* L0 l6 k- e6 H　　 〈/tr〉! }0 ]" o/ n1 C4 j- V
0 }1 w5 H$ g1 t6 W. r7 ?
　　〈/table〉