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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
8 n' c/ e- x  w0 q! g: \1 J: w: R　　
' y+ Z# q& i' C4 L+ o　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
! M8 N  i) z: ]' L& o) N
0 M2 z0 W5 @$ F　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
" Z2 t. I( ?( U. G4 k* i
; d+ M+ ]  h8 K+ d　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉. H6 _6 w$ _3 J( }: x- n% o' y
* b! v& I- ]7 Z* |
　　 〈tr〉' C  j6 B9 ?3 A% C

+ q" {1 [; [5 ^　　 〈td〉
8 B  {# J. g: B3 N
  p& C* @6 O9 `% a' W7 q' t' k　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉  q* E( R& U0 `, u/ N5 H
+ ?7 Q) J6 h$ s. B1 ?
　　 〈tr〉( L6 q/ W: G5 f& X+ ~! z6 \* a" i
, [4 A! N* o$ f% |0 e) o
　　 〈td〉/ h& Q. Q6 [1 [# g0 n$ A

& p3 m" ?% S+ v. v; s5 |　　 〈/td〉
2 v4 W$ Y% W( b: G& g: `
0 N4 U1 `2 U; V6 k3 x; @3 w　　 〈/tr〉
/ f/ ?: W0 ?3 A% `3 N0 m3 J5 f- d( b2 V/ x( R0 t( n: m; Y# U* k
　　 〈/table〉
9 G9 P9 {- z4 U" i. C4 K$ D8 e8 S& E* Q4 k2 r* h
　　 〈/td〉
  x6 G# d; ~+ M4 l- s7 L- V# R. c; ^; M' V& y
　　 〈/tr〉
" ?7 f& I# |0 _" E
* r' ]6 C% F" ]5 Y3 Z+ y% M8 X1 r　　 〈/table〉' j2 I7 p, M1 p+ X+ _

# ~# {8 x9 X; `% ?  X　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
0 m6 H4 [& j1 U' K! C
) t' ?; O, k8 E2 T　　源代码如下：8 V2 U; y8 @& O$ m
. ~2 q" P" C* T5 i7 c
　　〈table border="0" bgcolor=white〉
! h" \0 g, p$ Q0 l) h
9 r  v- L- R3 m" S　　 〈tr〉. q( U: U8 E8 s/ {  y; T/ g
5 U5 w% T& O2 n  |& c9 T& I: J6 L
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉1 A- Y. w! j/ @5 N# x7 J$ w

' a( ~7 l' A* K8 N% Y　　 〈/td〉$ E! s# i8 T+ Z5 h% ]- L' |, k

6 q' |  H! n2 g8 G8 y/ @　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
1 [# B9 e6 A6 c2 T9 X4 }% }- m  R4 s, w9 W2 \4 V
　　 〈/td〉  j+ \2 U) P) K: W& b

* q, f8 \  U" E0 U9 v$ r　　 〈/tr〉4 O: j3 s9 y8 f  G* E/ I: ~* F
" Y# h! I* W2 }4 ~& y
　　 〈tr〉: d4 @, I3 q0 L
2 q6 R2 Z5 j' _& l) u5 c
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
. \" s2 y! B$ B! B# u- A6 M/ V0 t8 I1 r0 N- J+ N8 g
　　 〈/td〉
& k; I0 v8 w- Z# e8 w, Y: l: N. t# ?4 k6 B- R$ B
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. O" t5 s! z0 X/ y2 h; ]+ t- `5 F3 L
4 p& r6 o' O* b# ~, n
　　 〈/td〉0 {9 x& o( _" x2 p/ k

0 P: `# }4 u9 ]! ~6 A3 h. Y# w& V  c　　 〈/tr〉
+ ?( `/ F9 S4 p+ }0 \  y% D: c6 y% \$ a3 V, g) Y) L* G: L6 H
　　〈/table〉

晴天再现

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