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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。& X/ b/ x; o$ q  t
　　
2 I1 m5 w$ k, x- x　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。8 M- `! m8 y1 O2 K

) u) c0 I2 O: U1 g5 E' F, D　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：6 O) [1 @) @; R$ ^# N0 ~8 d$ E; J
! K% U" G7 g4 u) M$ ~1 V& \8 R
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
* v+ W  g4 n4 F( b2 S7 Y( Q7 q2 L3 Q5 g; [" M3 O: C" R, i
　　 〈tr〉
* A+ B/ f) l( d8 O) R% c
. M4 _! A# y7 y, ~- u1 M/ x0 S8 ]8 Z) f3 }　　 〈td〉
, i% Q% G0 j! V3 U- w5 w' F+ ~6 J- g9 C9 m
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉7 r8 g  p9 C2 k' I; j/ B3 G9 m7 f
3 K4 F) o9 y% i! P
　　 〈tr〉
5 V' K5 W4 d, O* z2 D; V. D( s3 a) X: j) q; l
　　 〈td〉6 x: a9 z# i( T# K1 t2 r, T

) L& z4 t" _2 |6 m2 t. U　　 〈/td〉' O. a& v  n9 [( W3 E) k! V
# I8 z) |( ^+ |7 C0 f
　　 〈/tr〉
' y" }: o; e5 Y# c2 \1 c' [
3 @2 i, E- V' G# r0 U　　 〈/table〉
$ |+ G9 _: @: A% |$ @' d/ T0 [6 i, I2 i- Q7 |
　　 〈/td〉" o. [! T) T# w+ H! G* X3 J
0 N, J" k& a: A5 i! O4 l
　　 〈/tr〉
5 X2 K0 L& N2 g# r( `8 v$ c. t) r# C$ `
　　 〈/table〉
) O+ w6 S0 u: v
8 c9 s3 V6 o( \+ b1 T　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。3 M& v4 r, m! F0 ~& i9 j3 i- P
+ s& C0 M; a6 S2 {
　　源代码如下：: k% V/ t! ]; }! Y6 Y
; v! S! K5 Z: O, Y. u3 P" z
　　〈table border="0" bgcolor=white〉$ P' m' E7 ]7 |7 O6 a
) X8 |1 e# k4 q
　　 〈tr〉) B# e7 W, P, y+ o' T& z+ D; `1 ~

$ n# e  B5 Z2 x- Q; M　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉& J/ V8 P5 v, S4 ^/ ?, z

( K. g2 H, w6 T0 A, W　　 〈/td〉2 R  N  ~+ F  V, Y) a- Q

3 n' s$ `3 S: v& d1 v+ c0 g% c　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
6 q. u- X+ s, L, D  M8 S" {6 \' a. i
　　 〈/td〉! C+ K/ D2 s; ]3 R0 v, J

7 W8 Q- r) S" m9 M# o# S! Z　　 〈/tr〉
+ l( l1 a! q/ I/ |" h( G; T' K8 O/ ^6 J$ s( ?' O7 J
　　 〈tr〉; \: b2 p8 M6 L+ t. a( }
( T5 p. Z: R* ^, k1 _: P, |
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉( O$ J, y" v8 U+ O, {/ N# P0 r! [) ]

3 W7 X& u( t! [! M. x　　 〈/td〉
3 f! r8 P1 ~  A7 U: p* L# h, k/ U; C( `) e" v' h. b
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉, M$ r( L" h4 X8 h3 e% O9 s( h

- G7 w; O6 k: n  F
5 w$ D. z  G$ l( n/ f* o' ]) ^　　 〈/td〉* B- I; Y# R: U3 U: v; F/ O" B
' A& n. k( [6 ~7 G- {7 q
　　 〈/tr〉) _* L/ |1 p6 M

- Y' x" a8 Q6 F" k! O　　〈/table〉

晴天再现

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