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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
  `& V  M& \) N: o' r　　6 _7 T+ z: g$ D! {
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
6 B) Z8 K/ A+ ?9 R9 M$ N7 h, N7 m  o6 c3 A9 `
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：& x/ u  `. k" z' m

( i  w3 P, _4 j  z% B5 d( B　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
# c' m# Y% D& W" M. p6 K! b6 V/ i
* x. b" x* Z8 Z5 L7 v+ F: v　　 〈tr〉0 }+ U2 e3 |7 \( B3 v
+ u0 c6 E, @9 f8 ~
　　 〈td〉" S9 K  n7 K' x0 W5 J* ?

; {, ~& k4 |1 O1 `+ \. @　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- ]1 I0 P* D0 K( Q8 V4 F# Z
/ j% P" i6 m' J+ ~7 e
　　 〈tr〉
9 H7 n+ Q6 K# h# F* D# U8 r
. F7 [! J/ w/ Q) d' b/ s: v　　 〈td〉+ x2 X. i/ Y! u! E
3 _. i! ?0 p; H9 Y7 U
　　 〈/td〉
1 ^3 M7 s, E$ o7 I. j0 W( p; O( e" H- i2 p9 l; p
　　 〈/tr〉
$ `2 i$ ]/ d4 T) N: d0 G5 {3 ^
. k2 e1 F) [0 N9 B% i　　 〈/table〉6 c# n% D$ M* C' @* N/ w

- v8 \) y; ^# S  V5 {' Y) r　　 〈/td〉
9 I4 v8 c5 P: Q- S# R
  W( `, L4 w! d3 E- E8 U　　 〈/tr〉% P5 b& Q$ |4 p* d% u, Y8 N% q8 }

5 J3 I4 N# J4 |3 Q4 z6 Y4 [　　 〈/table〉; o6 \" M3 ~5 ^2 i% a& W

' a1 s. F! W# P/ g1 q: U7 t! s　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
3 _& j4 z& a) l; q; I9 P3 G/ k+ A2 V
　　源代码如下：
* y# e  n: Z+ b: h; V; U+ @5 K) D/ @
0 o! u& }) b) d. J　　〈table border="0" bgcolor=white〉
* ?4 N$ c5 W; ~- h8 @! \6 V* N$ r  l4 R$ l, W1 v, N- s
　　 〈tr〉  @+ u8 J! N% b

' N$ ^2 F3 ^/ b　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
; m8 ?0 I/ v: z8 R: D. b3 W; M  N* ]- D1 o; o3 @3 V; U( U
　　 〈/td〉& b; l' M, m# p- w
3 u) Z0 N$ {8 b. M8 c, {
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
2 f6 N# o. s* a3 P3 |! i/ u. p+ g4 A4 P. x
　　 〈/td〉& |$ l0 O3 O$ r1 G5 x' D
& I' o* Q4 }& F6 B
　　 〈/tr〉$ `' ]% N+ q2 Z* ~( x
3 L# D" W$ l: z" [) S2 z* d
　　 〈tr〉4 w3 A# r$ F% E! M3 [) w. w$ M

  f/ G# m0 _( ^7 w　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉& L% H$ S& E* o; t0 o
; `  L( B$ x2 t; ]/ w4 L+ _
　　 〈/td〉: _4 r4 G7 O  H7 k- Y! ^3 d

/ p, B: M1 o8 g4 ]' L　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
+ a0 ~6 O9 {8 x" [& t: w" r
' {! ]5 x: z4 w- \, M
1 l8 |6 |! O. N　　 〈/td〉7 L  t; D1 _8 N$ K/ D% {7 \

5 i" s" f: ]5 J# K! H' n! r- ?7 w　　 〈/tr〉2 t0 L' z$ z2 l# }  |! r

6 v9 c* x* Q" x# g3 P- [3 W! d% @　　〈/table〉

晴天再现

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