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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。+ r6 ]* s$ N, j* ~2 n1 A* ]% W
　　+ T/ ]6 x: O' C$ F9 x
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 d  v8 x- H! Z' r% u
: `3 H9 f& z( e3 E4 ^7 e; E1 n9 d! ~　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
/ p( H5 {% f( i& d) c
! k/ _0 J8 Q2 E- f3 e　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉; w! g5 U& I/ T3 Q, w( [
: B7 a$ b9 L6 r+ T8 N% `2 m
　　 〈tr〉0 p' l( J* b) d' n

5 q" [+ A0 I6 D' j! x. K　　 〈td〉& ^0 n7 _* f1 x" L

5 a% k4 C$ t! w' g5 p+ h  P　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉! n, W8 }: M$ D: `% m! K3 v6 ~: p: d
6 r; h/ k4 G' L( W; Q% F' i( C
　　 〈tr〉
$ R1 F. X: |( ~4 V% w- S. P
8 P& E: ~2 y9 [7 e　　 〈td〉
: C5 z& `% {! W6 r- \/ B2 b, l* n2 G3 i( ~
　　 〈/td〉3 C" n% x. j) W  q. }
& m: M( a- x8 J/ H% J2 x1 |
　　 〈/tr〉/ c6 ?8 x  f# f$ I% d7 |2 t
$ L- [4 ~: ]- R6 L) `6 u
　　 〈/table〉
6 {  m; g& W! F  I, a+ o$ a
5 u; {3 h' ?# S+ G2 r　　 〈/td〉- b  ~% V1 I4 b! P$ u
* O: j* I$ K, b
　　 〈/tr〉
) G- S8 g6 Y& |( M# w
' h. O! x/ z0 @/ u" V　　 〈/table〉
+ ]# J% \6 n0 t* H/ i4 G2 ^# m* n+ K' ~
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。" q( ?# i$ f$ _0 ~1 |9 ?

) A. \1 Q  j8 K) R　　源代码如下：# i- j' j4 X, m6 m3 |6 ?9 [4 P
9 i/ i& E& c* ~1 p" ~
　　〈table border="0" bgcolor=white〉& v8 F& W& p2 ^6 T: w

. a% m0 q. }9 a　　 〈tr〉. _& w+ y+ p) M& q; \2 G; ~) O
0 C8 b6 P1 l5 M5 e
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉1 I5 D& s/ r4 z/ t" s  ?0 T

3 H- K3 k7 P5 G5 j8 R* f! C　　 〈/td〉; s8 b: F5 C9 ^! _0 [- J- |
7 N  ]9 v  ~) m7 b, y! y: b
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉; g# r( }+ H5 G, R+ F( X
0 G' K* ?$ N! J7 u+ `, G  b  W
　　 〈/td〉
. V1 [) N4 V% Y2 Y  |+ z. W
- {' W: x* F( r0 m% J, C　　 〈/tr〉
. h3 e6 J7 B5 T+ _( ?8 B8 ]
. ]7 m; C+ x+ Q- q7 Q7 D+ @　　 〈tr〉
5 ~& i9 w3 @3 m7 X, j& B$ t: I& q8 u- s8 x
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉0 |  D( D  o% I
" x7 H( j# K' I$ @) N
　　 〈/td〉
3 i# N9 b: C7 x3 F, G& Z' l/ N
$ E, S* y  r- `/ p3 D$ r$ A　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉/ Q! h2 E. p3 D9 F( @

3 T; ?( J6 H2 L
$ [. K) \8 j# S* o' ]3 }" H! C& k! g　　 〈/td〉7 ?7 r  C  w0 t& {4 q! f1 i9 @

9 j& F0 @: d5 k7 y  g; t9 u: A4 N　　 〈/tr〉( D6 @4 a7 w5 D; [
- w! v+ b' Q; @+ z6 B
　　〈/table〉

晴天再现

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