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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
; |! D. [: j* s( O/ t7 U　　) p- J: E/ T/ I1 m$ z& x. W1 A5 ]
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。3 ^  U% C: L" h8 r8 H# H
& }0 G: {; H' D; d. s/ I, S+ l! ^
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
% ~( @  n7 L+ B7 @( l6 i* u" l( q0 w0 M/ j
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉- O/ T0 S2 V  t7 \5 m
& M' _( F/ z& \+ O
　　 〈tr〉
6 l! I3 h/ }, Z$ g4 H; b- s+ R9 N
6 N( \  U# j) @8 q$ z5 P　　 〈td〉0 `* y( t. r, V2 G  L& K

. b, |8 S; d" t$ _8 q) t　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉$ y) h3 i4 u; T$ ~& w' _, z
, |! k; r3 }3 ~# j  u% d/ d
　　 〈tr〉
6 M8 Y9 v/ w( V- z% Z, s- p. C+ |, o- ]4 A2 C3 \$ D5 H9 p
　　 〈td〉; t- w# w; h: o1 @, z

9 e3 s; P/ S& j# h8 u! }  U　　 〈/td〉
" F$ \" N; f6 n4 W
# {* j' A. T1 L. q% g/ ?　　 〈/tr〉- g" `6 l; R3 Y5 j0 T9 \& s4 x& L
6 F2 F: I6 |+ J: J) v6 @
　　 〈/table〉  J; b0 G4 r4 R+ f

4 z* C. l& I% J  t/ E7 {4 l' u2 h' P, G　　 〈/td〉
( [2 F+ S8 Y2 i# `
! [; s) G1 M! z! I! j, g& s) M  e* [　　 〈/tr〉
* x; o+ d0 O' q4 s/ f( e1 R; L
9 C) V. a, o3 d- D　　 〈/table〉
/ K: k  ]8 M: P. y$ C, @8 k$ [( c" u$ Z6 g& @8 z- K; F" q7 k. `
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  h0 E* l6 J& l# A

& p, H. @; D4 C" r' r+ C8 a　　源代码如下：
0 u. e  u& a4 C& L& n
+ w2 G' z6 {+ O　　〈table border="0" bgcolor=white〉
0 l' s3 [- |9 j0 Q
. @" e" M9 M8 V/ e3 s4 Z* p) i2 h　　 〈tr〉1 K9 e$ T  w2 |' [
3 v' m. e& C5 }' u& v
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉; v8 P+ h+ ^! r* _; v
/ m' S" ]- ?- M4 a
　　 〈/td〉
1 ?8 G! q* M4 N# G* f- p. R
" |' x! {2 c& R$ @6 i# I0 Q* k' x　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
; I0 T- o) E' u% I2 T, B. H1 t$ C7 o
　　 〈/td〉4 m; ?& ]$ ]/ X8 H5 A  S

9 R. u$ U7 @5 j" I2 _9 f/ X　　 〈/tr〉
0 a: a1 Z% j" F5 G# y$ W& V( a% e5 I9 Y( x0 q
　　 〈tr〉
, M" y7 w, N4 e: O! G( J. Z+ w/ ^: q! R" d6 n! J
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
% [6 M' X% [) B' J
% W; L: T0 F9 m, y　　 〈/td〉$ t% ]( S) _, H8 p! B( J! Q7 }1 W3 {

$ w' I; L8 V9 X% q( \& H( s/ [% o　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
+ G% ]0 q1 C% f* f
/ A! d* d0 h" m) d& g3 Y! a3 d
- `: H  ]; f+ ?( f0 X! V: k　　 〈/td〉" F' B( |' J. p! Q7 Q& T& n8 o+ _( j. \
! A' a( G- A$ i
　　 〈/tr〉
0 e) H% U+ a/ x5 B9 _1 D: c( A
8 I5 C: @, C3 f7 Z　　〈/table〉

晴天再现

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