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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。  J& L+ H8 \4 M  u. |1 a- o
　　
0 [) @" o9 I0 \　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
. @0 V5 ]$ `# G6 H8 F* i; f4 L% h. Z1 E7 K! s9 I- O
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
1 u% _, d/ v, R5 w' N$ `
/ W6 l  ]! [# Z7 p　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉* G4 i! {9 E4 t% t  l

& Q/ P' q  ~+ j6 K* P( ~　　 〈tr〉
) q! B1 N  B; z* h& G" @" ]& I
/ W+ G1 J5 C9 W* N1 @2 D2 c　　 〈td〉6 z9 e4 w* H" q0 c
: ^# p. B( g) l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉; b& @- q, F) v8 ]  C
* u. p/ k2 b  C, n: G3 y
　　 〈tr〉# U9 R) z# Q; r) D! [
" i, p5 z; P( ~% E
　　 〈td〉: ~, C( N  i  }" J+ D9 ]

: p. b9 Q* v% e0 D+ U2 ]3 b9 e/ C　　 〈/td〉. w$ I( u7 v% J* L5 }

" `1 M& `& l/ H6 ^% g2 T8 g　　 〈/tr〉3 \+ {( O7 C4 U$ n" F

5 q5 @. y7 j$ M6 t9 J　　 〈/table〉0 N5 ?7 _. K7 _
& ]& f# `- H4 B2 Q) f
　　 〈/td〉
2 m1 O9 g" ^) A4 w+ M2 `
8 |' W  _7 ^- p　　 〈/tr〉
# m- x0 U! x8 s6 S7 `6 `4 \0 e# t. A/ o( T2 T% t) U
　　 〈/table〉) I" f* t' R0 Z' g. _

- U1 x9 A, |& [7 c! G* M$ B# {　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
+ ~& a, ?6 m* l9 ]& {$ f8 A; d8 `8 q
　　源代码如下：
# a2 h* n1 W. N: A
1 ]7 k( b, j) m9 v: r: K　　〈table border="0" bgcolor=white〉+ ?& T6 {& @$ _- v# f6 T
- m8 i9 e0 a/ i! J
　　 〈tr〉
! i4 b& H8 x/ S1 _) b0 C5 ?) T3 Q1 b- w$ M' S4 t
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉( B2 Q: @% p7 ^! |3 i1 o; i

4 Z6 l, Y6 p5 k  e+ o) E! O+ C) c/ C　　 〈/td〉
% B4 q- k0 ~! g- _+ X
$ X# `, U+ M$ G: d& M　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉1 _& Q: Z; @: `- U% e: j

8 i5 ]( @& P% N* H. p. {5 t) \　　 〈/td〉
  ^) @# V+ K/ M7 X' W" m% j- c' a
+ B8 a  c" m! K7 m2 U2 }& D　　 〈/tr〉
6 I0 o  [& P/ H" J( L$ O2 p* c) \6 H7 }
　　 〈tr〉
1 o. J' ?5 }  R3 A* P7 p6 O
8 C5 `) X3 ]$ h　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉. F( a& {1 N& r) g- `/ ?
: q) r* W$ m# W( A6 X" o. X1 H
　　 〈/td〉- G! m' u; \$ x' w6 ]. `, {
7 O& S( L' s* m; w' i$ I% |! ~8 ~
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
* y1 T2 ]& V+ e$ Z% i- s# _$ D1 ?

: a" Q( _( k. V: k* \3 }. k　　 〈/td〉: @5 H* H8 }; D5 A1 J' m

, y0 ]! u: m- |  i4 H; t7 c　　 〈/tr〉
3 g) ?+ y# V' _5 o2 t
1 ]6 w  n! Z5 R# w; s. D　　〈/table〉

晴天再现

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