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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
  G# [, s! b6 x' o* [4 U* h' T　　
) g, b9 U: F3 P　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% r1 u/ M/ N5 q) t
: N% @2 y& @5 |
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
. D7 M) k" S$ z3 X7 N0 ]1 R1 e+ `& Y( X7 m8 P* y
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉/ ]2 Z7 S# M. y/ ?9 T9 m& f0 p

* n$ n! _; H0 A0 b　　 〈tr〉5 p9 {! F1 r' Z6 b0 H3 a* L
7 U) q7 {3 s* O/ C; y, C" _
　　 〈td〉
: w: ~  j' M, n# r/ `- L% T4 R% |
4 f1 I) g5 A6 U4 `, U( \# l　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& ], p0 I: p. m6 u/ s% I; i
9 d! ^- q: T5 y! j0 v　　 〈tr〉( ~0 m: F! J# n# e# }

# _+ E6 V3 w) O　　 〈td〉# p& o6 |+ h" j% V! @! x

6 T8 Y, p7 }" W8 J/ W　　 〈/td〉
  k* T% e! [( d
' F2 N$ X  c4 M' w. ~. D2 c! {　　 〈/tr〉8 t) f: ~/ _3 @! z
! g" K6 N- ~2 z$ C9 a5 h
　　 〈/table〉( r$ ]# a9 [1 P% N1 V/ D. _8 j: [
6 N9 ~% Y. d, m4 W8 Y5 g: K# ^
　　 〈/td〉4 v- d6 P- @( j* r2 F) B, w* L% |
7 A1 r0 J: i6 Q; Y$ Z: I9 x( H. n
　　 〈/tr〉4 B5 a! a' s9 ?4 ?$ R
; G6 j1 `1 M/ j% G& K( R
　　 〈/table〉1 T8 x( X- }! x, q, s

6 G' \9 x& Z' _0 k* B　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。% c, s: a8 o" y; ]/ e1 i, d

4 z; P; |( A! |/ e) [　　源代码如下：  m6 S; j- g& \0 \/ i4 q" c

2 z8 Z$ h- e0 _* ~& q4 k　　〈table border="0" bgcolor=white〉
( ]  f8 F( U2 u+ d+ ^" C& H+ e& N& J
　　 〈tr〉
* N; H' c. J2 a2 x2 f
% L: a* I6 e0 b, t# K& ?5 d8 A: [/ \　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉$ B3 Q" J7 o& u7 Z! y9 p5 }4 D% G
! ~3 E. x9 J; I
　　 〈/td〉
4 A( |$ I3 s' K: u1 F5 l! ]1 W! f- L% R3 k: c' @3 {$ |
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉2 H/ l! n( G8 P/ `3 G; S' _$ D

* d4 G: O/ _5 o- A% Q3 p- F" J4 Q　　 〈/td〉
/ |" h7 ]- q) U) Y  d
  c* l4 M+ r7 x% w5 A6 \- @　　 〈/tr〉
+ |0 S2 H/ b( N* k" T; H4 U# L% O2 n* W
　　 〈tr〉
  G2 G9 N; e3 v7 U" k! I! e! P9 d; Q; Y) M: y! ^
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& t: V" A7 C: C. q; k; n: M; H8 G( c( [2 Q9 w$ t, E/ V( }7 h  u
　　 〈/td〉  }! u4 I! d6 F/ \* A. G
- D$ h6 ?0 F9 H" V; k7 @+ `
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
- }1 j8 {! S$ ^6 a3 e2 N! k5 ?) ~
+ Y9 N5 a# b: g2 d& S6 ]7 Y5 x" Z! v! h1 M1 f6 L% R
　　 〈/td〉
/ Y' ~  |* @9 c) F$ V" C' ]9 J/ r+ \' q6 q
　　 〈/tr〉
3 l0 [: r4 z, y" Z; {1 U6 L( K
! ?0 Z) [) }# p# ^2 y  p　　〈/table〉

晴天再现

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