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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。5 @( f. ^. r. m- y
　　
2 ?! M8 O2 m, V　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
: F: n! I; C) G5 Y$ |0 u! t0 w* ?5 x: [
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
# M5 e& I- b, [1 h7 J- R" p8 B1 \2 q' U1 `( R' }
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" @  p% p" q, i9 X! o7 J, D
; n* R5 I, ]' H+ L  e" {  V　　 〈tr〉
$ b# C; x( ^" D( V" |& J- l. e9 f  F1 x5 @5 U5 b1 [# d
　　 〈td〉' V8 x% H9 B" C1 V5 D. B

9 W/ n" f! ?8 ?/ t- P) X: ]　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
) ?: Y% Q% f4 A" c# O  K2 U
0 T; M  N5 U. I　　 〈tr〉
* H. \5 p7 ]( i" }, x' y6 v9 [* I) W2 A
　　 〈td〉) M$ Z" A' d+ {# E) b
  _) T# j5 @* U- D; A% z
　　 〈/td〉2 T4 |% y4 w5 h; M1 `/ {

. Q( M% V* G" E　　 〈/tr〉" K$ W; l3 ^# [. |) }

3 {- F+ f$ k- _; P! f　　 〈/table〉* v. [+ M# w' J; J! U% k8 Y5 e

4 d* P- V1 Q; H. X- z　　 〈/td〉7 s: J! n3 _7 N4 ?/ v: P' [3 Y
( u2 P8 d8 N" D2 o' s6 g" n7 T% A
　　 〈/tr〉: X1 [- Y6 T5 N9 v
( f3 Q8 c$ q. W7 G' m' p
　　 〈/table〉8 A! M: U4 g* J; ~' _+ O2 |$ {3 x
. Q9 A: v  S4 R# y
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
) ?6 P) z& o; K! i. R# m6 V0 D- e0 E$ Y& Y
　　源代码如下：
  Q/ q$ x# f/ [& Y' ~0 z3 A5 |% e7 Y% ~
0 x6 X! V8 k! J- l: p" Y5 Y7 I/ n% H　　〈table border="0" bgcolor=white〉1 \; a( L8 [' ~( Y  G
% H, i  Q) O9 e2 F* ^1 a
　　 〈tr〉
! u% Q" x/ _- G+ K
6 l* j- d8 }6 \; u3 Q) l. F　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
& ?$ _: L1 D% I0 t% G& d5 Y2 T; n1 L* E
　　 〈/td〉5 H8 \9 x" K8 @: X3 G
) W* j4 g, W. f9 G. o
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
1 K  h! L( n: m+ N8 a
( ~3 ]+ Z4 K5 ~* L; H, s　　 〈/td〉$ r0 @. j5 s3 A5 e

6 ?! r+ i% G- E' r8 f: u　　 〈/tr〉- J! E3 i3 ~; o3 r* d! y

" I# [; `+ x& L5 C　　 〈tr〉" [0 U' R$ L4 Y  c

4 K6 e& o  V7 ]0 D6 `　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
' O- i' W% u# H. Q! {& F' w5 _
/ j/ \" n, ]& A8 N9 u$ L　　 〈/td〉
* r  A0 E$ o: ~4 Y4 T9 U3 ~2 ~# s7 T9 @# D# u
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
+ s/ \: u. L. ^
& d* ^# t) c9 [" Q' I, I* i# x6 k/ Y: \
　　 〈/td〉
6 u3 d2 {& a+ E( ]7 s2 d0 q' ~7 n+ O3 Z: N# z2 y6 c
　　 〈/tr〉" m' q- j4 r1 F9 \+ S; ?9 u  D/ l5 q

6 u* M& o* m* f3 G( ]　　〈/table〉

晴天再现

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