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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
* P0 I0 K; B' D6 {9 |0 f" N: j　　4 \- ]( r8 S( r& I8 _% z
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
# v) l1 k$ \- n; s! g7 O9 w4 {5 [
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
3 M4 Q4 {. y; |+ {6 B, C1 K6 ]# [! P8 F; Y: t
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉) ^+ {& i1 G- l) v3 }2 R4 F
- D: X5 J* `$ H+ f3 l
　　 〈tr〉
3 e6 @# M0 n# N# I5 e. n, v" v+ p. ?" A
　　 〈td〉! \0 D; ~- C% c3 p% K9 ^& ^

4 L( x0 u& e- J  c8 P1 ]0 k) G　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
- s1 l0 ^  A+ |2 g+ r
0 c) k  @6 I( ?, q% M　　 〈tr〉
7 T. V$ }$ m- W
0 c) V6 N8 U9 f6 Y　　 〈td〉6 J) W$ O0 l' q+ X
# ~5 a( @3 v4 J* v/ J, ]6 K
　　 〈/td〉5 y/ g6 Z6 c- L* G

9 m" }- N0 ^! P6 o# x# H1 E　　 〈/tr〉! m, O' k8 Y& F9 R* _
: j+ |0 V2 S: L" d2 [
　　 〈/table〉
) J) ]: C) \% g) T# b* y2 i2 h( H7 {+ X- C4 p# U9 h3 [
　　 〈/td〉
. B; C% e& j3 L# m" Y; p6 B' l+ W4 i; f0 h: M) E
　　 〈/tr〉
, |& A3 Y9 ^7 O9 A# g1 G
+ u1 V' x3 T( E5 W7 p1 d+ R) p) i7 ^　　 〈/table〉
6 K& @# z; W2 m( s7 i- T8 ~' Q! A+ Z1 C( T! E# c# U& X
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。& o0 M. x; B3 w( b

" L# O; @+ J/ q* H　　源代码如下：" }0 Y* ?; a' n5 u+ F' D

! g1 x9 }* [6 {　　〈table border="0" bgcolor=white〉$ I; x, O5 p* e1 T0 r& O5 X
2 `2 p* i3 [  {, n) V6 n, T) C
　　 〈tr〉
7 a4 {* N7 O7 C& p) t1 A7 C9 ^: h1 d
" w' _6 r. Z( e4 H: P% G, v; G3 G% J　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
) @& B/ W/ U% p; w9 k6 B2 w$ H6 B5 N
　　 〈/td〉
5 x) U; z, x( f5 K2 G5 u
: y; U  A3 Y6 M, e4 C. q* j　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
+ I" G) M( [: \* f: c
7 N( O- D# n7 T6 M; `( t) o8 T　　 〈/td〉
" `8 ~" b& }. O
( t6 r. b0 z$ H( @+ }　　 〈/tr〉
* I4 ]* \2 s( o9 d( e# [9 O7 L  E+ w
　　 〈tr〉* H4 j% M6 L: R' [: H

0 `, U$ b' a6 R1 v# Y　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
" f% U8 |$ B5 f/ d  p1 ]4 y- n: [+ ?  I; q2 Y
　　 〈/td〉( U) Y1 \$ f3 t  \% }1 p0 X# y

, R! j2 D8 H5 H" m　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
& S6 V: g0 [  P7 h5 ]* G( o" l8 R9 K2 F4 H# b
! |6 |) _, ]0 g/ K# ~
　　 〈/td〉
. X7 @2 ]9 C4 g' I
( [" I* D2 A  Y5 S$ g& ^9 D" i. Y. y　　 〈/tr〉
9 k: v2 u% W6 |4 D9 G
( @# H% Z* |' [# N2 W2 C+ n$ u　　〈/table〉

晴天再现

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