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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。: Z. w9 b- M; q; O
　　0 B/ d: T; O6 ~4 _+ _, k, [. x0 ^
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。0 }% [! M  h& M  V) D2 ]

( [% S+ ]7 j2 S　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
2 Z2 U7 f/ e+ V. I3 [: v- p- o- K( C6 Z# Y! m
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
& v# P9 x3 o0 V( b& U3 ~+ g
" ]+ p0 t. h4 v6 g9 O1 i' x" l　　 〈tr〉
7 t, d! F0 u. c( ?3 m! j& E/ O: U' e9 ]* g
　　 〈td〉" @, R( ^( G2 b
  c0 {0 W5 C& J6 M2 C0 C' F3 N0 H
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
$ c! D5 t. W/ Q1 v- w4 ~/ f
5 q4 N6 ~0 W+ [4 A) j0 m　　 〈tr〉: l* M& ?' M5 N! \# q
5 L* E  P& j0 `: \$ W" b" [& A& ]
　　 〈td〉1 Z* v3 b/ r$ l- U  q& c

' N, [+ y. S, Z0 O* L6 B　　 〈/td〉
5 W" w' G+ |+ l3 ~, V; }
* i. ~3 v1 H% M　　 〈/tr〉; \" O& h/ h. @9 p" ^8 r/ Z

! f  N5 p, I9 X5 O: O* D　　 〈/table〉3 h& N7 f; j$ }* P: h

! R2 j% ?) k! c' T2 m, }  N; O　　 〈/td〉
* g2 S4 ?3 J/ H( F3 Q+ x" I2 C/ ^- J8 t7 s$ I$ i! b. R; X$ l
　　 〈/tr〉: T. z& i) W( E
6 R" }8 n- s  f+ _7 b9 ^! j9 W! }
　　 〈/table〉$ t7 w, _! h" F8 }5 U% ^0 o& C

; H/ i2 j: U7 {' |7 J2 B　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。# m/ M' K6 _3 b. W# I3 N
; m/ }. _/ j; x6 x
　　源代码如下：
$ t3 Z& y' v4 A* _7 X" s% Y: x: x) H# p
　　〈table border="0" bgcolor=white〉3 n2 X' E3 k/ ?7 Q: O
# Y8 d0 |3 O$ |+ h6 ?/ Q
　　 〈tr〉* j1 X4 A4 i0 a  L+ s' G
6 L4 Z2 L, A! U$ W8 |
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉; f! L+ t0 ^" g4 W5 f% W7 c

+ a& `) S+ Y/ ^$ S7 J8 K9 M　　 〈/td〉
$ G% C' u4 J" Y& z. ^7 h
. N# m- L) ]6 b2 B8 z$ l  c* ^/ k　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: e% f' n4 z( W/ [$ U9 O$ }0 J
) v! ^# F3 d! \! [3 y# a　　 〈/td〉2 S* o* `0 l, T4 K0 V
4 ^5 ^% K6 e' E4 A% I
　　 〈/tr〉
2 E* k' I. B$ l4 u: u) _' a- M9 v/ l. ^; J* V
　　 〈tr〉
2 h, ~; y& o$ c; h5 J0 e7 x! _' l2 N- {1 Y3 T: N: T( u* J, S
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉# l& Q/ i" l0 Z; V9 @4 a3 y

3 A! \7 y) K- b: \: z& t* J: }　　 〈/td〉
) ^+ S& T/ F, [5 M  n7 U* e1 I1 U8 E8 W% I0 y6 O6 \# J: Z4 h1 T$ k, Y
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉9 U" g. \1 h9 ]: {4 M! x2 o2 P$ \
& @; n' @; f8 {' ^( L$ v5 p  u
3 V0 s, f+ }; u/ O/ H, _
　　 〈/td〉
) t2 V9 G& Z7 g0 T) ]; b5 P( l- ?+ E7 l4 h
　　 〈/tr〉" F4 X  H4 |0 w$ ~
. B! I: n& M+ r, b7 m* [, e/ N
　　〈/table〉

晴天再现

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