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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
- `! s4 Z- R7 [" Z1 |/ {; R# a　　
0 E: _3 B* z* `' E; h7 V) `5 e! h! y　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。- F1 W8 q1 y' v9 J& ?
$ e) X1 F& n, o) A1 `& ^$ ?
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
( _: c* _5 f/ w( a! w* {
) |# L2 F+ V8 o( Z　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
- ?+ _  ]9 d4 z# S0 E. ?. f8 ~& X# c( T4 w: ^6 p; J# ?! j
　　 〈tr〉
1 `, k5 {2 I: f; \) r$ s9 y! ~
5 X2 ^/ i  O8 X　　 〈td〉) ~- w+ Y6 k0 w; Q0 u6 ]8 m

5 @% ^6 Y' P! b) v# s- {　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
% b# u' c' z( n4 U6 ^6 @5 u* w+ F. k, x2 m
　　 〈tr〉. o# S' Q/ H% p8 _6 b0 e# x
# q. p1 A7 w- u4 U
　　 〈td〉
# o  ^$ @1 z& R" @0 S
% ?1 F" ^; U7 I  ?' b　　 〈/td〉0 F7 Y4 Z; [4 r( K' I
4 L( W+ c8 I. `0 k9 c6 f5 N
　　 〈/tr〉3 m$ l6 g1 }3 D' Q4 f0 g
3 D) ?3 W/ e# Z9 D) a/ \8 A. z
　　 〈/table〉
! Y1 x& t( U4 `% j# w
. {0 ?# S& r* g3 i　　 〈/td〉
' Q6 L- h) h+ ~/ B9 U3 U3 |' s: u4 N0 w7 H
　　 〈/tr〉
# u4 e  {( W- s
1 t% s# r# y* l, L; E/ D　　 〈/table〉
( t1 e( T% `" s: m% F3 l# V- q8 C0 U% n2 [
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  u' K/ l+ x. O2 m* \* @* z" g

0 ^' E& H! c* K　　源代码如下：9 m1 Y6 a  S+ N8 N
2 i8 F% ]& \! x4 _
　　〈table border="0" bgcolor=white〉) I' R8 `+ w+ A' C2 q
' J# r; U' t7 c4 U
　　 〈tr〉
0 [* T- e! I" @
( P2 T6 x! O% k, C1 K" n+ c3 F　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
( O, O2 x7 H* D$ ~. u; T2 R+ V. m5 t! W. q9 j
　　 〈/td〉
( }9 a$ @  t& K5 j
9 c; m$ ^2 @, V, w7 m$ x+ p9 w　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
$ p+ T2 |* F' N! E8 h6 m6 }# Y6 h+ Z9 z, x/ _
　　 〈/td〉
4 K! r6 w4 a* r3 d4 j& m3 r, `, T6 A, Z
　　 〈/tr〉* e5 S. c( L2 m7 H# F- {# J! o, i3 x
) l; k4 k: X) @% R. X) l! s+ g( H& [0 I
　　 〈tr〉8 p' I0 ~3 {5 `  ?" H

3 E, \& R  T+ u- D, |; @+ K　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 g2 Q! ^8 I0 k% `6 H4 R# }& C  Z1 q7 G* y9 a; l' l
　　 〈/td〉
$ n/ f( b) t! H5 q! L
  A" t, @- U; G' w" v$ r- J　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉" O6 U; H4 g, M: U: `& {
' u* E' ^- n, e0 d
- F2 v% {. \$ Q! ]# ?9 R$ ?' `% ~
　　 〈/td〉
( Z+ k' X/ e& T2 j3 L$ d* h, _1 \# B6 c2 O: q* r0 O1 Z
　　 〈/tr〉% G2 f- n" F6 @/ g3 A. g
: G0 a. |# H& X  X8 A
　　〈/table〉

晴天再现

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