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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
2 c9 h# ~% x9 {% C4 I　　: }! d( f, c5 Q0 f3 T3 Z$ N/ y
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。* e( n; ~1 y+ J$ ]; t
4 E! `- b% K1 @/ i5 b  ?4 Z0 ^9 {9 v
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：% A0 b7 e7 I/ r3 {  ?

" ]  [9 |; G1 S) F" `  Y- _% H　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉% L$ V: R% G+ |  ?8 k: @2 ^9 \  u  u3 Y

7 i0 V$ c( Y5 a　　 〈tr〉* z. l% @$ Z1 B. E

  o! K! t/ S. w) f7 [9 q　　 〈td〉' ?- v8 W4 b, X# `: c' z" {

* A* y0 j' [) v　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
( l3 j0 K$ ~' W6 r8 `& |# J- R9 n6 Y) J- Y
　　 〈tr〉# M; ^2 q+ s) n$ g0 ^$ L
4 h5 H( H  L6 U4 @! r6 J
　　 〈td〉
- _" \6 b; Y. V# G, d2 v1 i; S+ `6 T, a* T% E
　　 〈/td〉
4 G7 O1 g4 ?" N, \7 X1 I0 q6 T; ?( p* Q
　　 〈/tr〉5 A& K9 \* n0 M- W2 @
5 U0 ^* v' `  v& l2 J9 S* |
　　 〈/table〉
+ W) Q" H1 g0 c& z
0 C/ i4 u/ A  ?; r7 f% j$ t7 K　　 〈/td〉
+ G5 K' p, N1 h& `( i4 [  E  K" H4 b/ N2 s
　　 〈/tr〉. j6 B! J3 {* Z* e4 c
* D" A3 b. g2 z6 B/ \
　　 〈/table〉
% h1 j4 b& m1 {% X) y3 X' V4 A8 ^. n% B4 B: c$ F
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
* E  M1 O  i6 U0 r% }
  f7 ?0 y; C7 q) v1 l; @- {3 a/ q3 l' o　　源代码如下：/ w3 q) O& ?# F, c/ t% a

& k: C% A7 s3 B　　〈table border="0" bgcolor=white〉
! P$ A& n0 P3 O" y- O$ O+ Q% L) }* O+ i+ q4 b
　　 〈tr〉
! m2 r; @: f: p. o( W/ t9 |& o5 c4 r* s% P' z6 U
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
( e, `3 J# W5 P& q# L$ j* G- r! Q  [4 {$ Y, v5 K
　　 〈/td〉, E" j6 x+ l, Q. d  \
, }0 H+ w3 u. S; f
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
# ]' r  X4 Z9 {5 q5 u6 @, Z" D3 [
* o" {7 P7 `9 m) x　　 〈/td〉9 @$ |8 [% K/ Y  Y' a

! o5 k6 ?. p7 Y% C" ^2 ^* S　　 〈/tr〉
0 ?9 Z1 q; ~9 w$ n4 W+ l4 y( S+ `/ a0 \
　　 〈tr〉
0 }6 d5 R; a* y
/ s; |. s  X" j$ V, p　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
0 c/ e. H5 F/ h
, t3 D0 J/ }* t+ r　　 〈/td〉
8 q8 ^) T* h, o! }5 H
2 h) E7 I& w  c3 f! \. e　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( y1 K9 r/ ^, v9 K: C+ U
2 k) F& g; o/ K
8 A. @! v3 }/ l' T
　　 〈/td〉
5 Y9 L- s- p2 n8 s& K; l4 u2 o; ^. x- K
, m6 T  Z$ {; N# J7 h, J9 ^& N　　 〈/tr〉
& r- [* I- L2 W/ e
0 u" r" T5 w- s, W8 Y+ H4 E. m　　〈/table〉

晴天再现

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