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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。7 D2 @# F& c& o3 H  A
　　
6 F+ q' B3 z0 D0 n5 ~' ^) K　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
/ P% W( h9 B9 i- T# ]7 a
9 m1 \; S$ o$ _* v　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
5 M0 S1 Y4 x+ H6 h* ?; m! ]; \+ M; d9 q8 \, x4 u4 z: a
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
, r/ U% N" @5 ?3 |0 M  {/ r- Z4 v$ i* L, H, L0 d) Z! _
　　 〈tr〉- z  R7 R; ]) Z4 Z; E! ]

/ ~4 \% U' w) v& U　　 〈td〉# ~0 z$ b9 i  o2 y# `# N
3 ^8 C, {9 I6 E3 U! r9 r
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; ~5 x; U& J% m! l0 V# k
8 f: b: W  m" b7 F　　 〈tr〉% o7 `6 t. `# R2 e1 s$ T7 X

& f% r* Y8 \# m  g　　 〈td〉
" U, n$ e! ~1 }& T7 j8 q
. {' J9 m, |- g5 f1 w' j　　 〈/td〉
  n% d) Y1 I! ^, b! I
; ^" b) y4 u( I6 G* w% l　　 〈/tr〉) ~% R# F9 d. m: f* X
: y+ _# z+ _- c- S
　　 〈/table〉
! f% x( [; N% V/ g6 O: e3 F! X) j. s  k  K) _
　　 〈/td〉
, L0 C& \% r0 G# R; k
' }% ]$ V& f% ~0 J7 N9 N9 s　　 〈/tr〉
+ a8 O% y& m: D2 e% t1 ?0 G9 n4 a; ^( d, C) U, [3 {
　　 〈/table〉
" O( G3 d2 q" \4 n- G. u& q4 e1 X
- r% Q/ U3 M# P) ~/ {, l8 Q　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
" C9 G( _# Y# _! J' i$ G; ?7 X2 B: B/ Q  E  {+ U/ q1 r$ t
　　源代码如下：/ `3 S: l3 ^7 m% j5 ]9 O
# {+ f. f3 a2 P  B! g9 z
　　〈table border="0" bgcolor=white〉, }' a% t) p8 P" J# r  L- s

1 i% J0 J; e8 X/ G　　 〈tr〉  u$ k& Q! @1 e9 O! ~1 o; X
. p) i: h5 P" j
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉+ z3 W& M5 Z* P$ [) n5 l

  M: ]' [6 Z0 g8 n* n　　 〈/td〉
4 ~) J$ I$ M" Z1 O: [1 {( s0 @& G6 z1 T! D: j4 |1 e
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
& ]; S" E, F* c, N9 x% p/ I( O, D7 E3 t) ?1 O& b+ O
　　 〈/td〉1 ^; e0 z* X& i+ @

6 Z  e& X/ T: u2 Y' z! t+ d　　 〈/tr〉: I) ^5 v1 E6 u6 p. G: k

2 ^- H1 m* X& m　　 〈tr〉& {6 V8 ^- ]0 u" y

8 n. g* l9 J) A　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉& w2 q) C3 O1 _

+ f/ G  b4 x  d% q2 S3 I& N! s　　 〈/td〉; Z) j1 e* w$ J* M; ]
; e# M  o9 Q1 G. F, k+ |( a
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
4 d; j7 [2 o/ J0 w" a( |2 i9 ]4 }% H# d0 M. s" r

% n1 r/ d* u. h  q4 |8 n　　 〈/td〉) J% P( T/ [; C; N: D- V

1 C, U# [- f2 H1 ^0 s$ m# g& F　　 〈/tr〉. S$ X- f9 T! ]5 H4 x- z
$ K, q2 U0 o  B
　　〈/table〉

晴天再现

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