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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。4 z. O6 D3 m- ]+ e) ^; i9 ~
　　5 N$ Q6 y( G% [! b, i# H! r
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
+ U2 }! u) v9 Z9 I0 U2 M7 P9 S( m) y( ]5 s. G$ ]
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：/ A, N+ b* a* @  D& H: g
) a1 \1 z8 ^. A5 k/ u
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
3 A2 ]" ~  T3 H+ b2 j* T4 {5 p$ l7 v, }' P: ]
　　 〈tr〉
1 _+ I  K3 W; S3 ^3 l+ L3 F0 _6 [& C0 v
　　 〈td〉
  C  F% y3 z/ I/ s/ S
/ o5 V+ U& S- ]* ?/ o# @　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 `+ n* [# X5 {4 n) e' i

4 Q8 E0 B0 z! ^% {　　 〈tr〉7 H8 r  @4 e2 ~7 ~9 F
9 D2 ?" f5 N# L! K
　　 〈td〉
  T0 v3 [. f8 M3 Y' f  [* W' ~5 ]2 C2 [, p" D
　　 〈/td〉( q# _' P2 l0 D; g2 w7 R9 c  o

, I' g/ N8 U1 E8 E% z　　 〈/tr〉, m6 H# y5 W( T5 S* J; b2 h4 y

; f( \, R  N% ~　　 〈/table〉
0 b+ `8 X" w' t: k/ R) N1 S" X+ q2 Y
　　 〈/td〉2 o# Z2 H# f. h+ P1 p* o

1 z6 \  J. T4 w- i7 ~+ m! H7 N! w' u　　 〈/tr〉* m% j. B/ z$ u5 t3 Q
, v# C) ?' W- o0 E4 l
　　 〈/table〉. B8 ~. ^4 Y! U3 e
( G+ C) c& B- V, E/ |
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。# @& L+ y) ]4 V7 K/ T

  _) `! ]6 o1 j9 X1 Q# e3 {4 E　　源代码如下：  i8 M7 P/ z7 r1 N
- g( Q' T/ D) H* d; S4 s6 S
　　〈table border="0" bgcolor=white〉
4 a; l7 w/ |2 v& g1 F- G0 f: Y" n! `- U. k( K; f9 m
　　 〈tr〉
% [4 [+ W  y" E* j& r
$ i+ k. R7 q5 O- L7 M0 v' R　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
" A: u9 h8 ^) ]: f& ~/ [* ]" r
; J3 N, b. W, m6 J3 o7 [; ~, E　　 〈/td〉
* h/ O9 a( r1 g
0 G/ J8 g3 Z& y　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
5 Q5 n9 a7 e0 J% O: z! C7 H/ [/ t: ^. K) V- V6 W. `! w: |0 f
　　 〈/td〉
# N" _6 b+ T) T9 K
. v( {& M0 G+ V, s　　 〈/tr〉
6 |+ x$ w* w% ?: H! _/ R* D$ ^7 \; ]; G2 c9 d
　　 〈tr〉- W+ M. S8 T6 R( }& y

: y! w: X6 l3 K* k$ I( e　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
4 @- j2 j- ^% d) u* i3 [/ \0 Q4 i+ i  B/ A. W. t6 B( \
　　 〈/td〉
4 o0 o+ j/ x; R. p5 P1 i
" R4 ^6 @1 N) u0 `# F4 i6 h: k　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉; r- w" n8 |* u: Q& V- S# `

( ^- _/ D& H' ~4 D- K5 Q2 Q/ |4 l! H7 K, v
　　 〈/td〉
0 ^2 T5 A6 u* d& \- E2 m4 E- S* C* z$ x6 R3 y
　　 〈/tr〉
7 q5 B; N' h5 ]' n: L
6 Y0 [0 V8 Q8 W1 L& c  d　　〈/table〉

晴天再现

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