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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。" p! `$ V( K$ ?# M
　　- v6 I# u( u( n3 C) ~5 h" P
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 T& N* q% F6 R; S7 j& B0 F
% [9 m1 G! U- o$ `7 w% t
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
& `9 @: y. U7 G* v" Y. A2 B$ l9 y4 ?2 K- ^
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& I9 ?2 b2 `3 F, J0 V4 I9 f
: W+ a* V$ p! ]) K/ n  @
　　 〈tr〉8 t7 l) ?1 O" C) W1 \

" t& ?! P, k9 @7 R- u　　 〈td〉& f! k( J7 U& B; O4 v2 C9 q
- ~! f) c8 I4 N0 c9 ^+ h
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- V, c+ d2 M  F0 D' X3 Y
$ W& @( g' U! k( G; K
　　 〈tr〉
2 D3 o( A5 N- I! v) F7 r+ ?: T8 r0 Q& r
　　 〈td〉
6 b' |' ?. Q, j# a$ w3 r. C- g0 s6 B4 X2 @6 f
　　 〈/td〉
6 _, |! o/ D  Z
8 {  X8 K$ w( H" h8 Y　　 〈/tr〉
, v; G! G( R& t8 n+ a7 b/ K" O; j& x
　　 〈/table〉2 U6 H: Y2 h5 Q1 F- z) ^

! P  ]( O3 j5 Y+ L/ H9 `. m0 O　　 〈/td〉! N8 J& Y$ X0 ^# [

' g! |0 \5 [4 n7 o/ G, z9 C: j　　 〈/tr〉) e' ^# i1 `& W. g' r
4 E- ]6 Q  Q( C+ e
　　 〈/table〉
* v, I6 |1 U. y  q  I6 L" v, c0 R
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。8 c, k( q6 V% z% u

' p& a$ Y  c8 {2 N　　源代码如下：
( R  }1 q2 O7 Q6 w' C. s8 ?" w
& y- F' \! Q0 h5 L　　〈table border="0" bgcolor=white〉
( p" E0 G- V9 c, L
) z9 F. P7 I2 h* Z* W# ]　　 〈tr〉( P3 j+ w* X& N$ y# i9 K2 J. y9 O

& B0 Q: I9 W5 ?# w6 N$ G2 K9 T　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
! A( R# H9 G, Y4 b( G
0 p& a. I% P9 f1 _  k1 B　　 〈/td〉
! I+ D* R9 X7 D& S* u& v* K1 l" z9 L( g
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
. b9 w: P& s6 S9 n* d+ t" T
' `7 U/ U9 n; ~0 M7 Q　　 〈/td〉& h' `* a" a2 \0 O6 n3 G
5 ~4 l# W5 K0 E9 p" {4 z% z3 W' r
　　 〈/tr〉" V* T: O" K" B- E2 V

+ v* U, s+ P9 d  r5 G/ \( Z( l  d　　 〈tr〉
' g! a- g8 ]' e! K9 e* O6 r1 J
8 t" W. U- H: J' J  @- I( Y　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉3 V3 |, O6 O7 i* z+ J. V* u
# K4 a* L  b+ B. t6 N# _. i' V& o
　　 〈/td〉1 D) b- S" W/ I  ?

5 q  W! s5 e, t+ d　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉" E( n7 ]% q; C
# `5 a3 Y! `' m' m2 Z. `  o

" N, S9 h4 `# K0 Q- a　　 〈/td〉
, ^6 a1 q( x; Y8 F, u/ c3 e% N+ [0 N
　　 〈/tr〉8 q: `1 q: w! }( S; ^
0 ~6 J' g0 l6 g, I7 e( R' v# P4 s) h
　　〈/table〉