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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。1 B) d1 s+ }" h, |
　　
3 U& X2 j  W  G# x% J　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。; K' v" F: y2 ~# I6 p3 A4 _; w+ ^& l
2 k* t3 k( f: \- G+ ]
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
  H$ f8 C' J+ T( E
$ P9 y+ u" _1 ^& g　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉5 I1 p( a# g" q0 ]  h- i

; G9 [& L! w1 ^  A1 A% |3 M　　 〈tr〉3 r, ]' T3 b. \

# s+ K  ~8 d% g! \　　 〈td〉; l4 [( Q7 ?0 u
0 U5 Y2 f' {" O0 v
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉6 c8 g) r! A! ]. A

; D9 W0 L4 {. f( K' G6 Z　　 〈tr〉: r( E0 \4 C4 Q1 h$ b0 h$ l

8 f" Z2 k3 @& }' v: x7 F　　 〈td〉
' s6 a, o9 g! ]! \7 N
6 i. m; r6 S8 B7 w　　 〈/td〉
' [! @. u% \' R' u: n5 \/ I. Y  W, |: B: K0 ^3 a$ }
　　 〈/tr〉+ \. t. }$ d0 I, h, p! ~7 z

# @4 \# l# O5 ^5 Y　　 〈/table〉
9 q( }7 o  S0 w
0 h0 A. H" a5 p& U' S* k　　 〈/td〉. i( j; O% j: _7 r2 [* r1 p
6 a. U+ i3 R7 U! Z4 M3 I
　　 〈/tr〉' p  Y  h+ @( B/ ~  {

: P0 S! V  W' w1 \" p& u' M　　 〈/table〉. ?8 u7 b+ i4 ]7 l  s# I
+ ]! R) c+ H4 d' [5 s" e+ z
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ }$ _2 ~: Y) Q7 M4 q. U' X$ b3 M3 p; L! m4 ^  \
　　源代码如下：
. ~  l9 X' ?- c/ t% _: x8 X+ Q1 ~/ Z) K' [  T2 A6 X
　　〈table border="0" bgcolor=white〉
) r- q. x+ Y. J# z9 r  I/ B( u5 M: V
　　 〈tr〉
6 L6 M* [3 Y( I1 x8 k& E6 A# A9 F& K
' u; q. r% Q' J- j　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ a' r. [; H# {/ Z4 F5 [# }. p7 ?  E6 p
　　 〈/td〉! O5 [  O4 F" d: S0 Q1 t- @, N
' e5 _& W8 `* O# J: h8 A+ Q2 ~
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
, j+ s3 m& X( [
* |7 i% Z) t% x8 m+ G; z　　 〈/td〉
1 D' J( ^+ K1 D! j9 B- [$ Q
! }) s+ w. M, q. @　　 〈/tr〉$ O/ y3 C* g" L2 I; Z" D

' `3 H! F: Y7 A- e7 M4 d  u　　 〈tr〉
- {) P7 e# F8 u6 p. |9 H
5 f, P8 j9 d  T1 J　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
) A1 N% [  O2 |! t6 \! {+ t8 K  {5 W! u& u' H: a
　　 〈/td〉7 J# }" ?0 e- X  O

! m9 C9 R4 y" w　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
, I* @- W. o' T" ?% S; D& F4 i' T  e  ]' a# L- R
: g* O+ f. |& S$ L7 S$ \, a4 I
　　 〈/td〉
- F) v5 F% S5 d3 m. @  ?  D5 k$ [  w8 S
　　 〈/tr〉
5 H' q: v0 Y# Z  i/ d0 m8 ^) Z& ^- E  D: Y( f
　　〈/table〉

晴天再现

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