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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。. i3 E) G0 k  i" v$ Y
　　
$ h% D, G7 Q* ^# Y　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
+ u! c* u1 O8 l5 ]) H" {1 e5 `. E. T5 q  y- X
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
. e# L6 }4 a+ H, x8 ]- L& i5 _0 m+ F! t4 d, ^" t; x; g
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉! j* P' H& w: i) m' B

: O3 P) V+ |! S& {　　 〈tr〉
) n- Y6 U6 R+ k7 T# v- Q
" X0 c) v! N: j% Y7 ?7 P　　 〈td〉
. B0 p  H" ?. g% a. z6 f# z: J2 ?8 m8 W6 A: V
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉+ f, S2 |" {+ `3 E
* w3 l. ^; F$ c& [% x* Q
　　 〈tr〉: t: m8 Y) W3 Q( L  N, k# ?# \7 Q

$ Q  p. ~: y+ h8 C/ R0 N: }- V" ^　　 〈td〉
, E7 j! x6 L" Z6 c  c& {+ Y; v, m. A7 S0 L) g  I9 Y4 _. J, ~
　　 〈/td〉
1 N$ g( Q# m9 [# K
1 c6 n. m8 `& F  W& ^9 z　　 〈/tr〉
& E0 d3 z1 \6 Z7 u1 }
% K. H1 u4 n/ ?& I　　 〈/table〉" o. m+ P1 l* c1 @9 X: s: }* Q  _

9 M+ j0 Q* l) |　　 〈/td〉
  u8 ~+ G# E! Y8 P( \# G1 ^1 G  f0 I' e8 O: m8 t, ]6 i* o
　　 〈/tr〉
( j0 G8 h; f4 p1 J2 @, _
- K3 q% i1 d  L' F; Y% J　　 〈/table〉
: @% e: t8 u  m6 m( M5 I
& I# K7 m. |# I+ {) T* l: W- U　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。# M7 O0 Q, ~3 C' G& A/ ?

) p" F( ?, L- X# O: ]# h* }　　源代码如下：
  x! P# z. X- t) F" t
$ f7 ~  v( \/ c8 G! [　　〈table border="0" bgcolor=white〉  e) S- X9 I; i+ a2 \

$ a# S0 b) x; _7 B% y3 ^2 f　　 〈tr〉
& T, D; q) Q  Y& a) X7 [( |) O  l$ n! U9 |! q! z& d+ L, ]1 J$ k& w0 a
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉2 }& Q6 o1 l+ m7 W5 G

) @8 p# Q5 T7 ^9 c* ^! R　　 〈/td〉' E! o2 W2 @' r- ^7 A  m
" m0 O; T, m- k7 t7 M% r' w
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
/ Z# j% w% G+ K4 }8 z7 B1 A/ L0 S, j, s) ^# l
　　 〈/td〉
) Y3 x9 ^5 p) h: H- I3 {2 w  w$ c6 y" ~  [- R, n+ A
　　 〈/tr〉1 E( x, Y1 E: T+ W0 K: [7 `

( \: O( P  y. B- e( B( v! E+ ~　　 〈tr〉( Y4 f8 T' e( d. i

2 \, p0 v- t$ G　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
; Q% s+ U: ]$ t$ P7 z8 N# R7 A8 k! b! u4 }( Y
　　 〈/td〉
& a6 m! u" b1 j/ I- R+ R$ {) w# H* K$ A1 v, Z9 [& P" j  z/ [# n
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉! l, j8 i  a- N) u. `1 M
/ J8 F1 ^8 Q( r; {* W+ {& n- _
! d; j2 n6 p8 l, n
　　 〈/td〉
; @# |, b8 R8 q: [! _; j6 Q( {- _) y( @6 A. y1 _  z$ l. v- T
　　 〈/tr〉1 h+ y: h: Y' P! U, r. l4 k& m
( k  T1 p! b+ o
　　〈/table〉

晴天再现

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