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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
( H  H! J: [# @. C! @8 J　　
. N; ?" B/ d4 u+ @1 V　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。/ a7 G' Q0 Q; k1 ~
5 \* e8 |( `3 `) Y3 P
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：' Z  o* D$ s3 ^( d# n) P1 y- K2 r

  `7 q. B4 \6 M5 a0 A5 G　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉* N" b: X- j' m! u% p
  S( ^5 Q5 [- j) ^& j( `
　　 〈tr〉
# q4 M% C4 A; A( O" Q$ ~6 J2 {. V5 ~/ @
　　 〈td〉
3 W7 M, l( g( p4 f' ]) T6 |  z* z! K' @6 [9 k8 U7 F, s  M& l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉/ }+ E+ Y; A/ W  x

7 _$ c6 z* n# Z8 Z3 n　　 〈tr〉
8 _4 t# x0 A$ S5 F. d5 x# x7 |, W+ O; P1 f5 k, t' |
　　 〈td〉
( b3 S% Y9 m) M3 ?" o5 g) I" F3 H
　　 〈/td〉
+ M$ e$ Z  s7 o8 R3 z) D) U, p0 b1 N# W% }/ I
　　 〈/tr〉% t! O$ c0 d6 _

5 T- e/ z! e- T% o8 v　　 〈/table〉
0 g0 [6 g) o7 K* v: |! c* G" k2 @/ `& }/ u4 m9 ~0 \
　　 〈/td〉6 U5 b: d( {7 [$ i1 ?

( o: s% n0 \0 A8 p' B( C　　 〈/tr〉
- G& I- @% J' ?( P: w& ^
1 ^: J8 l" P0 [2 r+ B- V; X$ P　　 〈/table〉! Z- Y* W# n2 P- W  [2 C

; c# E$ b) O! _' h0 N% T　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。# K4 {$ a% o: \  V
4 ]5 G1 V. H$ v% ^
　　源代码如下：; Z" N# N/ b4 N; ]% ]( ?! i' c

* T/ I/ Z' I8 P" q　　〈table border="0" bgcolor=white〉5 R8 q# f: v# J1 n9 P) U
2 X: `+ q9 _6 o! ~
　　 〈tr〉1 D, R8 M: ]- ~2 n) ]

$ z* [! r5 L& c　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉$ ~& \9 a7 W% H- G0 t

2 @: Y% x- K$ c" j$ d　　 〈/td〉
( j& Q# e% v- m( B6 g. u% K2 E! h# ~* z5 S: D% S
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉8 n0 L3 z* O5 i. L
2 |' u) i* F7 f
　　 〈/td〉
# d% q6 h/ u$ p$ h( u2 S! x1 V* R$ A( G: i& |! u& n* ]
　　 〈/tr〉
3 z7 y/ M; X2 l8 G8 S& O! Q' l( W5 j
　　 〈tr〉4 ~2 x* W5 x1 `, K$ ]7 I

1 H; S' r& L) A* s5 s$ y0 q4 a　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉- B7 U3 ]5 y8 G% f1 x

$ i- J5 _- j: K% U, H$ _& s　　 〈/td〉% {9 D4 [4 I( c( y  M

7 X! Y6 L0 ^. p( G! t5 p1 a　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
  k5 E' p4 \1 G, u- p: R+ b8 @& ~+ I7 C5 d5 Q
7 L* G4 [# ?# v8 q; u, t1 q8 B
　　 〈/td〉
# \0 I& [! w6 O; ?) k6 i# [
+ a* H+ y- i* f" |+ o8 F4 D　　 〈/tr〉
4 D: v+ {: e( ^! u! J; A
) ^  N# X8 o/ Q8 [　　〈/table〉

晴天再现

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