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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。8 S" _- u; Q) k, @. ~: @, C% j
　　9 {# F" ?* d4 y( W( E& H/ l
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。1 P. q. }+ H$ s8 l1 s3 {7 h6 P
9 k/ x. U4 s+ ^+ P1 U9 O$ y
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
  b6 w$ y% X; t! O
5 B' H) L* E6 m; e& V8 C　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉" ?# i+ t( R1 k8 s! q
  C8 h2 E- {/ f0 I, m/ a$ y8 V
　　 〈tr〉
, L% X+ S8 K. S6 j7 p6 o
2 p% I1 n: ]! g1 a* w　　 〈td〉! J# [! M& w& ~) k8 I
( n0 n, m7 Y3 S# l
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
# u9 q- ^% @  ?4 s! e: f( B! K1 s( d" R/ [7 ]
　　 〈tr〉& `) ^9 U0 i+ V5 z, {+ }
, s  i2 J6 V4 n: m  {( U
　　 〈td〉
) X& Z7 E! D/ c
7 e% E2 q3 ^' V　　 〈/td〉# K+ e# `# x8 s6 x6 B8 y" i
1 E  F& Y. p8 m. n; b' v- B
　　 〈/tr〉
# ^( |3 S7 s" X! ?% M, M9 t! Q7 ?# {1 T+ O2 I" d, \
　　 〈/table〉
0 K; `$ w% B5 j" V2 z* ]
( u6 o$ C" ]9 K4 J; n5 P( ^' l, Y' t　　 〈/td〉4 ~* C7 [. z& l: n8 E% N

0 h* J( ?4 @1 L3 S$ @: o4 Z　　 〈/tr〉
, Q/ i9 P2 S" n4 }0 s# l7 b3 i+ |$ U& v3 L" f8 t3 A
　　 〈/table〉
# A& q! |, q6 J, G% ]9 Z7 u
( r. Q+ R9 E1 \. B& z5 g% p8 p　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。' C  A4 k9 i- c$ ]+ A

9 Z5 _( O% y0 S! n' B, T, g: [　　源代码如下：
2 D! p' T0 t' n5 L& d4 A. N/ p
' w1 |4 j- ]" H9 \　　〈table border="0" bgcolor=white〉
: d" ?" v) z: X/ }! z( P2 f& S4 I, V: D+ W/ {2 y
　　 〈tr〉
, C% |3 W) X* {% c  w; D3 ~6 B( H! W& V/ u! Z3 F* Z' G& T
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉$ |- m4 c8 F+ y$ W! ?
6 `6 q) b( f6 E& a
　　 〈/td〉
6 q9 _5 M* ~. |+ t0 S' }, H# S7 V5 R+ ]9 L: Z, t/ R
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉$ J: Q4 L( M9 D! B: m# N

9 u3 c: n1 }4 Y' [+ O2 w7 I0 q　　 〈/td〉6 P3 k/ w  }& z3 N3 U* d
" J3 Y4 _5 b1 E  @; X( Y
　　 〈/tr〉
( E# C5 o0 ^2 w
' E, T, [  u" ]! E! J) F　　 〈tr〉
( \( P. s! ^& V/ Y# i
8 M( Y; v  l& @1 }7 y2 P5 p% y　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* t+ [9 G" E! B5 H2 R$ E
  e6 c7 C; {+ U& p　　 〈/td〉
( z# j. u1 a+ @5 d  ]) G3 e7 b. a  Q* c% p" b5 O
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉% X# z) G/ ~; p9 `

. e9 N5 t0 I: h* ]6 x# K
. R$ D4 d; g9 ?# S& G' A　　 〈/td〉/ l& J$ M: Q  E" J, J3 y: n

! _- W# k2 O- {! J$ t$ q- `　　 〈/tr〉+ f, b/ {! d) Y  I1 H

7 B4 P) ]$ X4 r4 z9 `5 F( N, I　　〈/table〉

晴天再现

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