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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ f9 [3 p) H$ W* J0 m　　
$ u- K, q3 f: o8 N　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
% s# M! A6 X6 L7 n) S3 n! x  ^! K' a3 d8 G
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 }7 o% V) D- n1 x. I0 y
3 i- ]- J! F: O0 D$ A$ D" B8 N% @
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉' c7 Z5 F8 _! C

+ j5 W0 \( l- O( R8 s　　 〈tr〉9 z9 }% q+ k" _, s: a, v6 S/ R
2 p2 ~1 v; L  {: l7 [
　　 〈td〉) c- ~, a' ^! o" `" `
+ k6 \1 {* O4 s% L; i9 W* z! t
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉7 F2 E, B3 Y& M. |5 D
8 N9 B8 \3 S, z
　　 〈tr〉7 u, W3 I3 N( r8 a
9 Y; F$ i7 K3 H; h( G' j
　　 〈td〉
$ J; T5 V  a1 x- R0 Z  B
* ~( e6 i; P5 l6 q& k　　 〈/td〉
) O+ Y- T  @1 b( z5 X7 T
& P8 Z) }; p+ k  E0 i　　 〈/tr〉
  O  B* B6 T- }# v3 F% z$ V/ Q  G( Y
3 o3 M: P7 t( \7 [9 i　　 〈/table〉
) _1 w/ R3 Q; m5 P% ?4 b; h
) Z0 I, C6 ~8 M0 ?+ i　　 〈/td〉& [4 l( z8 X& Y, S+ }7 }
6 h" X8 N7 Y; \3 ]: n7 _# A
　　 〈/tr〉; f9 a) }4 ^" p# r, h

% i$ c% t. j* N2 O- f' R　　 〈/table〉
; V* G& F: p7 ^
7 g4 z: Y" l. H6 y) _5 k  ?+ ?　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
$ O, ^2 L1 X3 k# t
+ o1 U/ C1 W! A9 W* U+ a. M　　源代码如下：
3 `7 ?& }+ A) ^& \6 H0 i1 Z* t4 b1 e- d8 p1 p. @* _6 i
　　〈table border="0" bgcolor=white〉+ Z- X+ z% p* K7 M7 M# u

0 L6 H0 p2 [5 r6 V3 s( ~, B　　 〈tr〉: y% [; J1 y' F% K

9 J; @+ v3 t* v+ Y　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉* ?2 c  f  N* X- ?' t6 h0 q* R

' ^7 e8 @, c. c, U% s　　 〈/td〉4 A' }/ M9 R+ h* Z! Z' i9 x, m

- T! R5 l3 m9 V. [3 {　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
+ _# \! d/ `+ G3 a, m
( g4 w6 k4 U0 _" j" b5 D　　 〈/td〉
" h  _' O* w# c
; {2 n& M- m: y' L- y" e! m　　 〈/tr〉$ o' f. j: \% W- Q" g" B" |3 u
1 x( }. M0 E7 F9 B* s
　　 〈tr〉
7 i3 @+ A& m' Q7 o) O& a5 n- T: Q% g8 w( C  n, v% i% m+ Y" Z
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉4 k4 a1 A* r/ ^  X9 W* z
7 ?9 n6 |0 d) A* e1 \# l1 X& y, \
　　 〈/td〉2 b' F! q. Y( D' [1 K) d

: b% c8 D0 R+ C4 W; `8 M　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉6 A1 O/ c- y# J
7 J* [! ?- ?: S# a4 D" b
+ p% `2 E2 _7 f& _0 s. l* m5 Z
　　 〈/td〉7 v! r7 d, \* l8 \' n! R( W

; f: ^* @9 N4 |8 S9 R5 Z" w　　 〈/tr〉0 n. O+ A/ T1 p+ Q
" w8 l' l: D! V% t; z
　　〈/table〉

晴天再现

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