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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
$ j1 R% T  B6 l" y# Y. t9 o　　# ^9 O4 w" x! P/ W; {# ^
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。4 J0 }/ q9 g" R' I4 D
, u2 @9 m# i2 Z2 v# h
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
9 t& O5 L( c  W1 }; Y5 F: Q* I# K/ H* V, e! o
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉# v: ~: H1 C, `# Y0 B
* n& F7 t. i, E3 m
　　 〈tr〉: V& S. Y' L6 \! N  c

' {" _" V0 ?  \5 p8 _: G　　 〈td〉
) |$ l/ I! d" Z1 g! R  H
2 d/ L1 X; d7 X% Y9 ^/ T　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉/ h9 o/ s. F+ Y
# c, M7 {  e0 T6 {' |
　　 〈tr〉
4 D0 Z! t% n: k, N. O1 N  g
4 ?' @$ T7 E# s* a4 N　　 〈td〉- F2 Y! y  }6 u6 c9 k* J" x8 w$ @

) H; [/ x+ f: w' U7 Z　　 〈/td〉/ z9 t  x5 Y" s" @( T
. e! |2 M- Y( A( d
　　 〈/tr〉
4 V: s& N8 H( P8 p' Q2 |" [, y# ?+ G3 G$ R9 H6 ?: ]! Z
　　 〈/table〉
) r7 P& f- S  P; V- @# ]. D# n0 G- [& I# |
　　 〈/td〉; g2 {; Y+ }. {6 O5 C: P

" r6 |( D) w$ y% n　　 〈/tr〉! i6 J" O; d, J: J* ]

- v8 a! s# r' f. ~　　 〈/table〉5 |6 ]1 @5 r: I! |4 E8 R3 y& Y0 }

1 {2 N! L2 }0 U1 e5 ~3 Y# f　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
* x" `* J, t  v7 ~* p' K
& U% x) |5 z- F: N3 E　　源代码如下：$ G. {8 i+ f9 e+ p. {) F
: {. i$ K( h/ |1 w  t
　　〈table border="0" bgcolor=white〉
# I- V$ V  M% v0 b3 a+ v8 a2 H. `/ b! K9 O" r* Q
　　 〈tr〉
# C( ^& k: o5 c& X. W, F! j$ W) q, O# K6 l; |& h
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉9 i/ Z" ~% V2 q% ]2 Z/ z
5 ?0 d: L: W: P
　　 〈/td〉
# n- |- G! j" S! E" p7 H' q; n
, F4 w( |! \) i　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉  u9 o/ H1 k# B

9 y# O" n" N7 ?: ~' R2 T# l　　 〈/td〉0 z2 X: Y8 @0 W. b9 V
, h3 i" T) j' Q: h- c" V
　　 〈/tr〉
! w2 |, E! e: I
1 f, e. O; ]: e  G3 n0 q　　 〈tr〉
1 b5 s9 D# R' o9 D# o$ g6 x  ]3 p
6 M4 R9 Q, ^& o8 d/ A　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
9 H% D% x( `* h0 v
- i! y: P( P& j　　 〈/td〉
6 k6 X# _  `6 M$ d
# G' ~8 Y, i5 T2 `: `　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉+ S: p! A! S) v! K3 p& w

6 ^( O) L' R$ r) S0 t; Z/ }6 d& u) u2 E+ L4 T
　　 〈/td〉
) O9 I6 Y" n+ I, K# m+ c  _
$ T- ~; h9 i& G! j　　 〈/tr〉& `( x4 _; r7 H- j# j8 h
% k7 d( g: b" r/ G
　　〈/table〉

晴天再现

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