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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 E( O4 g9 e8 {3 d: `1 }　　
% r9 W; G; y1 L8 K+ a　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。# R; W9 ^+ d7 n( N5 }( I) I: c
, y" \' E& _" r  y5 x% b) k
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：! j: Y1 N1 l$ K# W( [9 P
% P7 @9 c' |2 h+ J
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉2 Z4 _  E4 ]  `. f: v. e2 }

* V& c+ [9 a8 s" `" X: [　　 〈tr〉
, {6 s' |0 b! q# E0 Q
. N- j0 h; D, n, y/ n5 l/ I　　 〈td〉
) N* G6 L5 n# ?/ E! K# r8 E
( N) [$ z) [; ~2 [: d7 o0 |　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉. i/ i. D. z- N

2 K4 I5 B8 O3 o　　 〈tr〉
" p# ~; C7 s- F- ]8 z8 k8 W+ z
1 z2 U$ m/ b1 \# D4 a& T　　 〈td〉( g8 c% A/ c' N4 D" v* D8 S

2 S2 f( E8 j2 o2 r　　 〈/td〉
. B6 [$ `. k5 x6 x4 ^! ~6 B7 }9 |+ r
　　 〈/tr〉6 f0 i/ D9 Z; z6 K

' j' k) u# @0 g; ^　　 〈/table〉! n" q) T3 [& R- g0 u+ H
1 R' I! b2 F6 T9 {. {$ Z
　　 〈/td〉! n5 l8 W5 Z& a
& X# q% y+ {+ F  p
　　 〈/tr〉) ?/ s# U  j+ I& q$ v

( a* B9 c8 v/ _5 w3 C5 Q8 f　　 〈/table〉$ I! K& a- F( q  x

% ^% j- I3 r+ y8 L5 P　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。& w: t( x' Q+ Y* j2 o- s5 Z
8 }4 A( j- p7 ]# M( T) w% W
　　源代码如下：- g7 h8 c$ E: n- _# {

( @6 |  f% J1 P& |  E　　〈table border="0" bgcolor=white〉
, \& I4 B  _1 i' A2 ^  z+ {( I4 q% S/ B8 h* s9 r
　　 〈tr〉
0 C. x0 W9 N  y5 H
! V/ c: Q6 _& Q　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉3 X, _! x$ L. \
  ~% o6 @, t2 c6 ?; y
　　 〈/td〉0 L. v% v7 X1 }, i
) S' i4 M. d4 O' j* e' \
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉: H2 c4 [9 F0 w9 y

3 U2 j. G8 W1 K　　 〈/td〉3 M3 Q/ [, i2 L' U# t
& P! f/ q2 L$ K1 `2 u3 l
　　 〈/tr〉; s) A, F3 S8 p; l; c4 ], @
4 a% N. D1 V: U4 ?8 I
　　 〈tr〉6 I; L& f+ M# q/ H) g$ u& P  M. K
' y3 l8 ?" z6 M0 D' d/ I4 S' j+ a' X% y
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉9 U; l1 m" D1 z/ @& g

/ U% q$ N6 q5 F* N9 F　　 〈/td〉
" t$ s% d5 k( V2 n/ C6 d. K
* Q0 G  ?( g8 O2 _7 I7 s$ @　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉8 ]: R& D8 J( Z& c/ K$ p5 ?

5 `) e% g* E( c2 m- }# o' j
3 N, Z3 [& c! x9 E( u　　 〈/td〉% C, b$ {2 ~7 x9 u" m

6 H4 e6 j( ?$ M4 d+ B/ l' }& Y　　 〈/tr〉
, c& k/ ^& ^. f9 V# ^& n1 L, w2 I( O
9 P6 @. A+ a: N# ~8 u　　〈/table〉

晴天再现

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