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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。8 v1 d1 \- D, s8 s: d
　　
# ?7 H$ W$ T  K　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
3 j; P" T9 K5 @, D2 Z2 O
' |7 Z( N- V5 M3 I6 Z　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：! o) g& @! M9 T8 H/ u  U

6 U' |% E& ]3 H- S　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉  ?& V& m# S1 |
6 I, g( N  T# q. M2 i6 i
　　 〈tr〉
3 O+ s; A: a+ }5 O! Q
: G# o, t  l6 z: t+ c  W" R' K8 b　　 〈td〉
/ F, D2 D2 z# [8 l. ?4 U& @2 k* R. G" X, |6 }& s1 t
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
7 p1 C6 v3 l0 s! p  I6 H: \/ M1 c
3 A- T: W" u( u3 @* [- D* s- ?　　 〈tr〉
. o1 U. O& G; V- E$ F9 Z" ?8 B' ^3 z3 M$ I
　　 〈td〉, Y: P/ ]+ ~  W2 J8 }$ D

0 x% ~( d* m( F+ L) q　　 〈/td〉
/ E) t; o/ u7 @0 n( X3 m- g2 V8 ^0 |$ h% ^+ g
　　 〈/tr〉
" @$ y: I# b* B: Z+ Q1 A" i7 `; ?
　　 〈/table〉5 K# Q6 X* J9 z4 m8 r7 Q3 ?; L
/ g. c, n% g4 I# \
　　 〈/td〉8 h' P. S+ q7 ^/ N% ^

, S9 i( P5 L! m. Q( f( b+ ^# ~$ n% l　　 〈/tr〉1 E) l; |+ `8 D" c
! l$ O/ ]. n: q! N; O* Q  a/ p
　　 〈/table〉
4 G* j2 P8 {6 I" R  |  \1 a' l1 z4 d
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。& D' |: y( K) b& g8 I2 P

; C& n  }7 u6 b: J　　源代码如下：
5 `5 L8 w4 w4 y/ V3 H$ L% L9 a7 v! ?
7 f% ]1 R3 F- y# f2 ]　　〈table border="0" bgcolor=white〉& Q. ^; v  L- o6 q6 I

/ u( ~0 F, _0 Q" u　　 〈tr〉) ~/ F/ ]5 ^) d0 a7 F. t

5 ?: o7 y* j) t2 |6 Q5 M　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉3 r0 n( G% P( Q! i( k, h( f

# f! y# c4 M4 W& E. |6 z+ {　　 〈/td〉: j' l2 v! P! C8 x  W4 H
, J' \" k! ^! \) n; _5 b9 @5 o/ h
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉1 @% j' ], V2 u% P  K( {* s
$ `7 \) C7 Z* ]2 }
　　 〈/td〉1 |- ]& T* P' r7 P5 n

. L, I9 }% b) e; d6 f0 i　　 〈/tr〉4 T, V- G2 R$ Y. b( c( j6 h  Z2 P
  B* x6 H/ V% k( S
　　 〈tr〉) u% i6 z  s6 y) c$ M- A
; s" K# s2 W5 f+ j
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 E& K. U3 ~8 Z& O
1 w. }. u& Y* ~. }　　 〈/td〉, c& G3 b8 `2 b: U  r. l5 ]
0 p1 t- Z! w  F- K' Q0 ?3 z5 H; g8 z
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
2 O+ [( |% L2 U3 t8 q, L/ B6 Q2 L1 |  }, S$ J+ }8 {+ O! I6 X5 t

2 T0 O; \0 w* S　　 〈/td〉
1 K& L+ c! O0 y% @! y  {7 M2 u. t
; R% }2 |0 p$ \3 D% z: W　　 〈/tr〉% i+ h5 M$ }$ Q6 C8 w
6 `& S6 K# e5 u7 D
　　〈/table〉

晴天再现

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