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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。* X3 e1 G" q1 L3 M- q9 H
　　7 x% K$ _1 K1 \4 l6 d
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
6 n% n( ]0 n  \  ], `! Q. X9 w' c, n: ^+ [& {) C
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 {8 R# t. m2 u$ Z9 O
5 J) k# y; B- p! |6 c) w
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
: d' M6 L0 v( _- r( ~8 N1 _$ K) ^: f: C  n5 \
　　 〈tr〉. _% ?# R6 K. W+ B+ _$ ~9 W

3 B+ B: d/ D7 Q( q4 W　　 〈td〉
, U1 h# z7 R+ i4 l: Z1 `, y+ @& \; z$ P4 l) E2 l* d! |5 X5 f) ?- l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- h( U( c3 t% C1 {( z  F
  L, n8 |7 Y# `6 ?& B
　　 〈tr〉" y( A% c, m% h, O* `$ z( B
3 U9 v" T, e* J  S& M3 m& _+ V7 t
　　 〈td〉/ }5 p. X4 }, a% }$ M! h& W

( l' w7 {* b: l$ N4 [　　 〈/td〉
7 J! o' q6 U6 S* ]/ k) _2 A. a( T
6 n% g7 ^( N. {+ K" R7 L　　 〈/tr〉
5 _9 k! W5 ?+ ~2 K# F$ [& Y6 V! s3 L" A4 t/ _7 I
　　 〈/table〉  y8 R; r, |, x; Q3 I

1 }6 S9 H7 v5 ]. j4 }　　 〈/td〉
/ f. h) m$ h2 H3 B! v# \& W2 [* i' M- D! l
　　 〈/tr〉
2 X, z% n+ E0 Z3 A% z0 s4 @
" y5 H, k( G! _) y9 E% W　　 〈/table〉
+ ]# U7 S; o3 E' {! J7 b' a0 }' A9 S7 O* Q7 d/ |
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
: f# p; ?( q" d' T2 H, g/ O( _
2 j3 ?4 u8 V$ |- O4 s　　源代码如下：  N' l6 ?( Y5 x6 s5 F
( c6 ~$ q; I& @6 l
　　〈table border="0" bgcolor=white〉
* }- E" ?* n/ [4 d  `3 Y  C  f3 ^4 i' ~! W5 }" K- q
　　 〈tr〉7 @( T4 z* [. `$ p0 T, `; @

& X/ R( M+ r' o# P0 ]1 Y2 d　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
1 L& f1 ^; J% X
8 O9 V. \; {+ L  L* _- u　　 〈/td〉
/ m. x: P8 Y9 A8 D0 e+ t
- I( a: n3 `9 s8 n0 h% r" X1 f. x; D　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
" {" w  w# X9 r( b
! A' A; q4 M2 j4 g$ a( @, e　　 〈/td〉
; R( E9 D' H" X( Z, x, c, u1 u$ A: R) ^5 n
　　 〈/tr〉
; q6 y4 {7 Q- C$ t1 z7 E8 b$ x
3 m4 j1 F+ A- ?- \9 I; b　　 〈tr〉1 r2 Y# `3 P- e* q

0 c! r6 |4 H4 E: ?　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* ?  ~: R: Q5 H0 S% b
, }& [4 G# u& |　　 〈/td〉6 j+ ~- x7 L1 s

5 @0 [: H& `, \% T  @- k　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉& X7 @; ^+ L! t7 f0 y" w
" i" M- H3 C. P- |# \3 e

0 U  s, j; I* n　　 〈/td〉
. N6 b( S, t/ [! ~- f9 Q+ {6 J& L  ~7 A# J
　　 〈/tr〉
7 \: k% m; ^. `2 j! v& @% q* e/ o2 ~6 Z6 [( B0 s5 ~" u
　　〈/table〉

晴天再现

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