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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
& K7 K3 E1 d, r0 ], }" v% q: w　　
3 f5 X5 b8 t4 ~1 v5 L6 k4 I　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。7 ?+ c. ^5 p+ W

4 ~9 H% n8 Z3 |; g+ G: J　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
3 V+ r3 j% a0 t1 D- W$ m
' a5 s) M; ?0 `, c7 v( B　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
2 S- r. j" `5 R) f# n& [4 O2 x3 d5 o. E( |
　　 〈tr〉
! D; M. v( O+ d; J
& p$ f$ Z8 ^: q- i+ ?+ J　　 〈td〉
$ R/ q2 j$ ?5 F1 E7 h7 n; v, Q0 B8 {, n+ S! G
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉; L* M# s3 i- x; E7 y: {8 W) u
8 V, e7 ^( A, t
　　 〈tr〉8 A5 Y$ ~" V6 P$ V7 E
0 ^) J3 ?, [3 ^" c
　　 〈td〉  x/ V" F! W/ u$ `
/ e8 D: ?: s8 ]: p
　　 〈/td〉
* \/ q! @1 B# `7 j0 x) _5 N3 D4 Z6 R. b( }6 F( j1 V+ X
　　 〈/tr〉( B7 u' o. v3 G: p) V6 }

# O% q6 e7 e% M* k2 g4 ?: q5 ^5 A9 o　　 〈/table〉3 C2 b" W* c6 G! r" u1 a

/ w! U9 Z2 z8 e0 k. v　　 〈/td〉' I/ l$ q4 p2 [+ B

, q  N9 j! l3 Z, p　　 〈/tr〉
$ v4 c7 r9 \5 X3 w) h1 d) T  T1 b* V) Y9 n, k& \
　　 〈/table〉  g5 v9 E4 D, `/ J- i- N. y% e- W
+ l! m$ c% ~9 s2 ?" R
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
8 o! _$ M3 h" C9 \+ w  l* Z2 K9 R% g% {
　　源代码如下：
5 i9 m, l8 T) y6 p! F
1 S3 U4 t4 h! O5 O& A6 ~. I8 s+ F, |　　〈table border="0" bgcolor=white〉! _5 _/ y( k; X

! y: H# b) c$ h3 V$ y+ k! G/ m7 Y　　 〈tr〉
2 l* k# ~! s1 K& \' m1 K
7 o  _# m- I$ b4 T7 v! S　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
) T/ y/ s! g9 h, m& @0 g# _* r* m+ b9 `* o- g" Q
　　 〈/td〉# _; J/ w7 ]: W$ W' l/ {9 @+ Z
% m3 f$ S* S1 w7 K, h- }
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉1 b2 H# K3 G9 @6 c. _, d9 u
* Z$ k4 F" f& g' o2 T
　　 〈/td〉) |7 \- t4 }2 x4 ?+ k
; p& }6 [4 }: [" v1 B, }6 J
　　 〈/tr〉* D! y' H4 A: u
; o. k2 b* r4 h% X
　　 〈tr〉
+ h1 G# f1 M; A8 y5 k$ Q8 Q2 N8 b$ k
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉2 e1 b6 z* Y7 ?

% W6 r# u4 N, g5 B7 k2 K& S　　 〈/td〉
9 W- F' C3 ?3 l5 x+ a8 m/ |! D( i. }7 s1 x& V3 D, f6 P
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 P. D/ `7 k: b; ?* j( l9 l- g1 p% n' F+ t
3 C* R) k$ {" N. x
　　 〈/td〉6 H6 ]: S  z1 [  _3 o: G

6 `8 f  G7 |" I* M0 n& Q3 ?　　 〈/tr〉7 \; t' g1 [( ?4 R( L
' z9 F# K& _2 M  E# d( [9 I0 v( ~
　　〈/table〉

晴天再现

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