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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。, C# X% i2 G9 _1 _  S$ d
　　7 K2 E7 n- l) \3 |6 e. M/ Q
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。! }4 H; F0 g1 ~
( W) X/ g, K2 _% }# }# b" g9 X
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：* c5 [& M8 e: r3 X

1 V- \3 ]* j5 k8 Y$ E　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉% N: P' n  Y, k3 w$ w# Z( ]
( Z& ]2 P" ?4 [8 W( X2 y! T( \, W& p7 d6 V
　　 〈tr〉
# c# ]  V) t, n% l0 c5 N
3 @3 U6 P/ k8 c8 `　　 〈td〉. Q% [' a0 v+ j$ t5 V" U1 O+ e  F, Y

& e- h) {2 n1 H# ~　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉1 o: b* G5 t$ |( y' w
2 k6 Z6 U4 E  Y* c, U
　　 〈tr〉9 n- G% O3 ?& Z' K) t9 B

) A2 j# z" k, {. Z. f& A1 l5 M　　 〈td〉
" N) e9 X3 h# e# ]
* e, ?% ^6 c# [$ q; F1 @) V( [+ X, V　　 〈/td〉
& V8 @5 J. q( k: Y. F! c' e2 D- j4 }1 E% H7 h
　　 〈/tr〉) m# j' \8 h, z
% E. r0 Y2 t8 x) l/ E9 l
　　 〈/table〉$ O' `4 R" i9 y  W7 S
9 E7 G7 X' Y: B/ M* p. ^0 l
　　 〈/td〉& ~. N2 T8 T7 M) b0 \! e" q9 t
6 E2 U9 g% r. z; Y) f
　　 〈/tr〉. Y6 D$ d( Y- S
# X& R; }3 R5 |& T9 P2 g. N( W
　　 〈/table〉+ G" o+ ~9 E* X
' T( Q+ s: s  M0 @8 E$ Z$ u
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。/ C( h: Z7 u: Z8 T: b; f
; L) [, c6 S' o; X" n0 v
　　源代码如下：
/ |) E. e& [% X9 B+ O5 }
% T4 j9 H$ t+ m4 V　　〈table border="0" bgcolor=white〉# x4 v. i' n& Z6 v' l8 ]4 P$ m
+ t6 Q" Q3 w2 a- b; k+ q" t
　　 〈tr〉6 v. I" t& G7 {# v% t
# V+ V; x, j  @* G7 E
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
0 Q5 }% }; x$ c9 B. y
) n. m) ~, \6 r4 o+ D# t$ [　　 〈/td〉
* {7 Y" @- M5 D9 v9 T7 n+ g' u* P5 Q8 S& s5 e. \1 _9 y0 U
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉/ j+ `- U; w. c( M! |6 A
# _, v2 ]: v4 j; s  Y8 c
　　 〈/td〉
- b' G: z8 N, Q, w& x" R& E' E% ]! Y5 G) O  }
　　 〈/tr〉
& K9 _6 |) i8 f' S) J. v3 b  Y( B+ X8 {( E
　　 〈tr〉
( J/ r5 ]1 M* {. C  Y8 O; j2 M9 _9 D* Y
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉+ N. o; ~% Z( d' |' r( I' ]* q$ J

* t! ]5 b- g9 z/ I, J　　 〈/td〉
2 O& o3 c; o9 c# Y, W7 W9 G6 d: [8 N1 f
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉% Z& P1 ^; N0 M. g  f& L: B2 M

# o4 o' l. n( q; F( f- Z) c& i. S" S3 D
　　 〈/td〉8 S; e& w! Z: s# B2 K- C
4 L! E0 `* i3 a1 S& [9 L7 q! M
　　 〈/tr〉; a9 |. h8 l$ Q# I3 p2 Z0 ]
$ G, r/ i* L9 x7 X9 C% E: d& Q
　　〈/table〉

晴天再现

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