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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
) T. I6 L5 t( N- \$ `7 G1 q　　3 S0 ]& T8 V  {! n/ V
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
$ Q( |- G8 ]( ]7 ~* U" D
5 ~! X* Z* K& n  Z　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' R. i1 J0 ~" S) B2 q3 T9 N7 ]7 K' D7 U( J
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉4 w, K& ?6 _6 v' z2 Y4 e9 I

& f9 |5 ?" \+ _. m　　 〈tr〉
: Y( T& U( K; |9 [$ ~, N' B: |6 s1 p0 J$ j% T0 \# d
　　 〈td〉# ^/ ]; I0 Z. i7 n
6 u% x3 e; s8 l( m' j1 {- H
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
5 A- R* l/ l  \9 s
" U! j$ P* l1 k( e# t) |7 L- ]　　 〈tr〉# ?8 O) ]5 ~% {- @+ @! K" Y  [

5 @: U. C# k. g6 O3 i　　 〈td〉# b& _7 q4 b) _8 @
0 Z  N+ k9 ^: w
　　 〈/td〉9 R2 \% c- ^& `( e1 h

! d4 B/ f2 e! t7 L/ \9 S- Y$ f　　 〈/tr〉
8 e/ r/ [8 B" V2 j- c4 D1 I% U$ \+ h+ F) c( B8 i( V7 j. A
　　 〈/table〉
) H% B, e- D% @& ?
% I) S3 w( P1 F! q( |' \7 J　　 〈/td〉- g! ~8 Y* ~6 }
" p( d/ h# V7 f* G0 \
　　 〈/tr〉3 j7 X1 Q4 V4 t
% M: q# R1 _% H0 l2 d1 k
　　 〈/table〉
/ t8 O4 U3 L7 |! J
, W$ T/ |7 T# \! w　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
! W5 Z3 \. L( Z$ V2 Z: c9 ]- M0 f
/ s1 n1 ?. \8 B* y1 c　　源代码如下：" l: O8 H- `5 f. V$ H& V
) _! G0 M* n, t0 [+ H/ g* g
　　〈table border="0" bgcolor=white〉& I' b1 M6 x5 J  l1 P; P

& q0 m1 }8 o) p) Q' c* u& L　　 〈tr〉
( e# S: J% h  G/ f; E. }
/ B/ Y! @6 T* t+ G( K# r, m6 y. Q　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
3 v2 t! `/ b2 G( k- \6 N
  ^1 E+ K, y' [! x　　 〈/td〉4 {0 m5 d3 ~! H+ I# S( W1 v3 X

/ e5 v6 a0 m5 N" o　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉, J2 @: i- P/ ~4 O* S

' w, `, X& f- U4 W  t6 z- {/ q　　 〈/td〉. M2 W- Q( p3 W% K3 ^  ^: L; E
* `* _' u0 w3 W# t/ I- }! H+ X
　　 〈/tr〉9 I7 K0 B+ Y0 [' i8 U
: u) U& e4 r, e' O# X
　　 〈tr〉& s, x& G3 e; n* V" J

! o  ]2 K& |! S　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉7 x$ Z  o, L3 a( Y" J
$ k5 i0 y$ ]5 v8 h
　　 〈/td〉
( M- H3 Y+ k3 W, |- t& c( R: A0 z& _' O$ |' t2 \" c5 q2 c
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
- v, n2 P$ P5 e. O6 W$ l4 f2 T5 g! C
# j! t. \, e% }: z  z3 Q' X, `
　　 〈/td〉9 }# _& Y7 y! I+ t3 j- C" Z% n9 v
3 G7 `) G) Z% D; F) R7 y! R
　　 〈/tr〉# l  X( _1 M2 C/ e. l+ K' ]5 N* q
/ @# p: {# d7 H! G1 A
　　〈/table〉

晴天再现

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