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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。0 n5 u0 k% P* Z7 s2 G/ v0 v
　　* B$ b4 l. q( f3 R+ k' c  Z
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 H3 ]  ?+ h" s/ r: g( }% |1 H8 r

! \: b0 g( w: ]7 F5 n　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：" M7 t5 `/ g: C. u: F

3 G& Z' }. G( r　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
; e1 {+ b6 A, Q6 a  t
3 U0 n( z) H, g! d$ A　　 〈tr〉
, B+ u, b- V: C# s6 G5 v
: a$ n6 u+ {6 m# T; h; {　　 〈td〉! r; _; A2 S7 \. g# u

1 [! X0 C. M" V; k0 G　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- l/ J: n# W  L7 V2 [# d$ d

3 M1 z' m) |( p8 n　　 〈tr〉
0 k' m+ S! t2 U& W3 m9 Q; K! Y, S  b+ O
　　 〈td〉
1 a* _7 |6 i4 t+ u9 p8 u
" P( X" y9 _) i9 {3 p- x/ e( G' T　　 〈/td〉. e) O7 h6 _- K
0 q9 i/ C0 M& C, ^" F
　　 〈/tr〉
6 U7 [. ~& d, K8 |3 t; p
5 ^, S. u7 E" v* A& ^! d6 q" q　　 〈/table〉, X# ?0 H" n9 c5 I" z6 q2 f4 }
: i. a% t) I) ~  v
　　 〈/td〉" ~% L, N9 T8 h( b  W

# i0 O: x1 `0 P3 P# s7 Q　　 〈/tr〉3 `" W3 Q/ w* D$ B' G
1 u6 w" U6 I2 m  y
　　 〈/table〉
" `3 ?3 w( L3 f) z* l% m6 M% X# V+ k5 t' ^, n, \
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
! c9 [, E* B5 K. f6 C2 u  e. a
6 H5 h" k- z: S) `; y　　源代码如下：9 G: q2 D# M0 |( p( F" v& g

/ T. @4 N( G! ]3 |　　〈table border="0" bgcolor=white〉
  P  f* g$ \+ H' L. s
3 r' a" I- N' h# ~% ]6 H　　 〈tr〉7 R' K* Q" P( j3 w
1 r( M. C" p0 f( c
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉& [) A, I, E' L

" x  I) X! L0 Q( D7 Z　　 〈/td〉
9 E# y) t/ e6 F% k) O
6 F' g- A* a, J$ M　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉" B6 L) I. Y! b3 w! {
) H- P5 N5 }6 Z) V- C! R0 q1 O
　　 〈/td〉$ H" {7 c9 I/ N  `2 t) T/ n" y

9 ]2 r# Z. s+ a. S) A: x" f# b1 w　　 〈/tr〉
, t! O  a' y8 r4 T: ^2 F7 O2 M- w+ w3 Y7 v/ T' N; J; q
　　 〈tr〉# [; J3 m0 O3 D: y  }& R- F& P
+ n" _1 L% B- m7 |
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
9 M+ y# k& E" ~# h) h1 z
( n! a3 J+ T3 Z8 Q9 O　　 〈/td〉' B0 C/ f+ M3 c
0 H/ E5 {, |! M& o) u
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉9 l& `6 U3 t1 S1 u0 L5 L" v
) v. `, O8 L4 R/ |9 ^4 Z
/ Y% M& Y/ B6 [
　　 〈/td〉
* A, e4 i; S0 [# a
4 S3 t9 S$ S& m' ]% A　　 〈/tr〉
  c- i; \# {2 H  c0 `; ]! r) [3 }8 G! c& `7 i7 Q( I3 U
　　〈/table〉

晴天再现

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