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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。8 |2 x3 k$ r; \4 |- C8 S6 O- Q
　　
/ c, @* q. v: D$ x* w! L　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
  X8 H3 e  l& p* ]) o2 s0 x( w$ h4 F, @1 L, |
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
+ w, U- E! C+ B7 ~* i- }3 C3 u, q8 l, ?. Z7 F! X
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉: Q1 S7 d% k% T

/ n) ^. Y; R2 C7 c0 b- A' C1 ~　　 〈tr〉7 x, B' v, L/ \8 z8 H$ v, k! f

6 f1 w0 B. g7 I" g: @2 k　　 〈td〉5 G3 u2 I5 T1 R# N

% e) ]% t0 [0 s3 o2 p　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
6 |7 ]! X* O$ a9 \# V6 s, D- _$ i& B' S$ d9 ~
　　 〈tr〉1 M$ C: `* n! E! _

7 O! w$ ~, x0 u　　 〈td〉
, j- @* v" J( \# S% J4 q) s( p! P4 i/ q$ x. B1 M- v
　　 〈/td〉
4 e5 Q: Y! ^/ [( t* C% o+ U. P' n3 H5 Y5 ?
　　 〈/tr〉) D4 }0 K6 F/ b7 g! ^- r3 Z& I

: L  R( Y& A; U　　 〈/table〉
: W0 J$ ?9 I% q5 I2 t# ~  V( d$ A" U: Z# n3 F( e, L# h. b/ Z
　　 〈/td〉7 K3 W1 Y6 U$ b2 b% W0 N& P
0 K* q, L, p: a& k- {$ D5 ]
　　 〈/tr〉
& c# M3 f5 @! P/ z6 @  R3 ~6 k6 }
　　 〈/table〉
+ E: T4 L/ {- k, q" i
# ^9 V! V* M3 I# N9 k　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( [8 H' V4 Y+ `1 I" p

7 ?& ^* C  X) |3 t2 w　　源代码如下：
/ g. A7 X7 |1 D5 c) |3 S9 z) s5 l" ^. d! B5 G  I2 z. b1 r  G
　　〈table border="0" bgcolor=white〉
) n8 q3 R. M; N# t$ ?8 P8 D
+ G$ t  {+ K" u9 B4 f( o1 ?　　 〈tr〉
! L2 H& Q' e8 {% T" R
, U1 F6 S) H- k4 N　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉+ \0 a1 Y& P; T; n/ q# }

9 n& O1 o1 }. ?　　 〈/td〉
1 r0 ~/ L- M1 e6 V4 `: i! g3 X  f+ T5 o6 ]" g# J
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
' X, u% s2 u: w% E( A% I$ t2 _3 ?4 R9 Y2 n" V
　　 〈/td〉
, S8 |, u1 R0 F3 k6 r* W3 u) Z+ B$ ?+ h9 y$ b# x/ I, R9 \! r8 G' {) v
　　 〈/tr〉
$ b, a- Y4 T) l  M  G! ^# z! J
+ ^6 n- K' t8 L4 m  \　　 〈tr〉( R, L: \+ E6 I2 x% a8 P
5 L( t! P* Q1 S1 }/ d9 ~3 ~9 H; k
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
' K$ Q6 C4 }. m! J0 B
! o' U8 W: @0 ~2 ~- S6 }　　 〈/td〉+ a8 }6 h, y1 \# ~1 {5 {
! a" [! ?9 @8 s; C
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
1 _1 G  Y4 I; k( u- C$ F4 H0 \$ z1 ]! ~6 i( {! }  C- d1 Z0 @

1 _8 j/ ^7 Z1 [: F* C1 i2 Y　　 〈/td〉
3 R; X% I/ P/ b5 x/ h) O) z# X: f& q4 P  M4 c- j
　　 〈/tr〉" G) s& c0 R0 l* `, z
6 |% f5 g- N, t; D
　　〈/table〉

晴天再现

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