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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
" |. u  G# A) q, {0 ?4 m  ?　　" S( ]' q+ \1 Z3 ]
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
! H% @' L+ _) g( B
3 N) h( A* w+ p, A6 H7 r- f/ ^　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' N" N! y: X- \6 e/ x0 X4 Y6 ?# A5 I5 Q! R- }8 V
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉7 N% P9 }! U+ b1 N5 v, U
- ^& B( j4 I+ h& p1 o6 K
　　 〈tr〉2 e& E5 `+ m/ h. o7 _
* c# \+ W. E% a( X6 a
　　 〈td〉& q# G. ~5 O. g3 @/ [
: l& W' o0 n# V# J/ }7 _
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
* R+ L9 a7 x1 e4 T
8 C8 V. }# u  U" R　　 〈tr〉  t, j8 ]. Z+ O0 H9 J4 S- A) w

' M7 g* _/ f8 D　　 〈td〉
! t  J5 u7 N( L2 k% s9 U& h( q- L/ @0 ^" E9 o9 [/ f
　　 〈/td〉
0 x- E% _% V! n: j( N: g% N- o  [& z, {
　　 〈/tr〉; w" s% A# |; o3 A9 M
/ g* |! [+ S, }% T! w
　　 〈/table〉. H" N2 @. @$ p: A, E. o* ?! O9 V( N
; z+ D3 t  q. C, |  ^5 c3 J
　　 〈/td〉6 i- x: ~% B6 `, ~1 i2 }8 v

5 _8 r/ y; {& a; j4 d　　 〈/tr〉
2 ~( g8 [2 A  A. A2 |" E
8 s& O; i( Y& a- G　　 〈/table〉0 \8 W! S) ?% ?8 Q/ B; W

* W) u# r5 Q. f  b3 i/ Y- T　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
$ I2 ?/ u6 d. I: a$ J0 X* w) c6 V1 m. p0 L
　　源代码如下：
- }$ _: W1 [; x! c; o$ A2 b: V0 h: I
, {/ V" Z9 T/ r/ q6 u9 |/ z# r+ ~　　〈table border="0" bgcolor=white〉3 F1 W, s( V* g. {6 b& E; E& e
6 \- f% \' K+ R. z2 Y+ G! W) k+ `
　　 〈tr〉
/ e/ W/ z2 q  E8 f
1 \+ X& t1 H6 _. V' ~　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉4 X7 c1 U$ v) q7 m8 \3 x

9 r8 n8 b' U$ ?5 a1 y　　 〈/td〉
$ B0 g' }) s5 W1 M" ~9 X& Y. e9 h! w8 b! p  w/ G$ d
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉4 R5 H7 q% t' X/ y  k$ s5 u  c
& S5 z3 p  E! E! f8 h/ V
　　 〈/td〉; b3 d" v; H: I2 Z- J4 ?8 G
+ i. V7 H) T5 ]7 {0 S! J
　　 〈/tr〉( H2 E9 p7 x$ q! K/ w+ @1 L

7 ?) S8 {+ a3 l1 v. c+ s( N　　 〈tr〉
  Z% j0 S9 P- a8 }/ ~2 y+ U$ v  R8 B3 `3 M7 J
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
0 D. H. i/ e5 X1 m4 X8 g4 X8 Y# t8 ?3 }/ }+ [" n" f( c2 e' t
　　 〈/td〉% `, M! m1 v, o
( x: j1 `% b+ U$ c0 c
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉2 a# k7 c: t0 u4 g# e! R

4 g5 p5 f& I. S/ R. Z6 A* F
4 u& J% N, {- o8 q( R; w8 h　　 〈/td〉; c: Z  H: F5 K. }( \! u: A. d

1 |  D, n( a, {& P* }0 ~　　 〈/tr〉9 G0 g/ z: J; o8 F8 ^- {
' R4 u! u5 g; ~
　　〈/table〉

晴天再现

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