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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
: d" [( s) M8 ?! r　　, b2 H2 @- X9 H2 Z5 U' f/ }+ S
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
7 t) b7 s( o& A4 {% Q9 j7 i& F
0 q2 Y) b( G7 M! V! w　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
4 X" ^; ~& J: Z% f( f( m4 ?  W8 h  `9 }8 X
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉9 t9 R. z1 j) T5 z$ G# K
. f# `6 w, T% _, X' U. [
　　 〈tr〉- t! |% z% m6 R) x3 J% b
: K" e; T# |5 ]  h6 b/ d) N
　　 〈td〉
$ w7 @' @8 z* e0 N2 r2 J8 p( ~' }0 k& C
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉$ o4 i  Z# @+ T# |

2 U% b' v4 U1 r, A3 ~' H8 q　　 〈tr〉
/ G8 U) J, A" D7 Z/ \# u5 N' J& i; J1 q, T3 f4 P
　　 〈td〉
- O; ?% ]( T+ i
4 w" N5 K7 s7 T) `　　 〈/td〉) M$ f& D. T" x
3 A6 p+ x+ u$ p1 F
　　 〈/tr〉
& t6 \  A" e4 O. L' G  d0 b3 Z# s/ u  f( T
　　 〈/table〉
) y5 k7 A3 F  P) T% U/ e5 A8 b7 q5 H; e0 [  t* \& I! i9 s
　　 〈/td〉
1 ]2 |6 D8 I% P. |& r% M2 U( P5 r5 B( L. p$ m! w
　　 〈/tr〉
) S7 r/ f8 @, |( q) Z: {( a. X* v/ ^  a( H1 K: |: c
　　 〈/table〉( t; F1 M( D' P* o% E, ^

9 w- o3 k5 o! ?/ H; j　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。5 v: Q( j! M8 p3 o0 v2 \( w& r
0 }; v0 `& y- }' w( E) X  n
　　源代码如下：
: r/ a- Z$ K$ ]9 o/ L. \
' r, E& W" j6 n) r+ U　　〈table border="0" bgcolor=white〉
. p" ^* |! U/ z1 C/ _" Z9 E4 r  z# k/ `# c* W
　　 〈tr〉; _% T: Z/ P$ i6 r  t
, m' P2 [1 z: `, I8 t
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉2 ]$ w# ?/ Z! o6 n4 p, y
) ~; ~$ m5 l! {3 ^1 w; D
　　 〈/td〉
0 J5 a& K8 K) ^; ~! f6 m/ m5 [" f) K0 _! W
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 [# A" L9 l% Y% P) j( `) ], n! T0 Z7 L
　　 〈/td〉4 h6 J6 a4 h2 @  G3 m

7 Y+ v! r* L+ Y9 {7 ^+ }　　 〈/tr〉
+ R7 n" p1 s) \, @8 t( {; l! h1 d0 _
　　 〈tr〉
" C/ G- o  X8 d7 `
7 V' {, D1 M% S* m9 o　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉8 k0 k8 r$ j6 o" I. z
# c; }! g; E. R7 h
　　 〈/td〉5 k! ]: t1 c+ p% F! N7 N/ ^
% j! U  ]" V7 s# Y
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 ~* o4 \7 ~% s% o
; ]+ z8 _, Q3 l! V" s  W
* r8 x1 L) L4 L. u5 L! ~* \1 m　　 〈/td〉; C0 o# a+ Y+ \+ _
, Z- G0 C' m( U5 r  k7 B
　　 〈/tr〉5 r1 `! K6 B. E# a
5 p; N/ i& g. u% P0 j$ x2 f
　　〈/table〉

晴天再现

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