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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 N9 q" T+ C; t6 u' j4 v( {　　# g# ^+ p2 D4 ]) j0 f$ ~
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
3 M2 b% z9 N9 n' j- j4 u# K' n7 n: U8 d; Z! d
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
0 h. u% S' F6 i9 Z/ Q$ ~  L6 V1 G6 t1 @% Z: ~0 q' b: ^
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉  \8 [( D- X6 I1 J$ L

4 P9 i0 c* ^; W  N　　 〈tr〉( @! W4 c/ R6 f+ w
6 P* e: U; w* R3 W. ^3 v% {
　　 〈td〉9 h) Z9 D4 W& O5 \2 Q) g4 J

6 p  s" R  d$ K- p) F( B" y' b　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
- f; i: Y2 `3 x! p5 a* k7 K  Z5 @) d9 }
　　 〈tr〉* V  g: Z5 m! p( F" z/ Q0 K

, W9 a- M, k- B6 r3 @" ^* i　　 〈td〉
5 o, a2 X% F% B9 I, s# a( }6 v& O3 U9 Q! a! V% y
　　 〈/td〉( k3 w* q  W* c! N, z/ C
- \! b9 f( {8 }* y6 _; i1 D1 c( X& L
　　 〈/tr〉9 z  O, a' L3 b; [/ F8 F
& E- q' n  F* C% K/ C
　　 〈/table〉
- M2 e( V) J5 h, \, j0 H6 f0 E' ]' J) o' k3 _
　　 〈/td〉1 `) p% E# ]1 S3 K" n
' `; y9 U4 j2 v, }* V
　　 〈/tr〉
5 ]- K. F. m2 ^; Y1 t. H! @0 B. w0 A  s% l# o4 _6 z" m
　　 〈/table〉1 z6 o. b$ x  d1 N

. f3 |. \8 M# b. Q　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
8 F4 Z3 A8 S+ J6 l8 v% Y, \. ]3 u+ c1 K+ K
　　源代码如下：0 ~, M/ P8 C8 O0 T+ W' q

$ u* S& F: d2 F- |　　〈table border="0" bgcolor=white〉& `# h4 B: ~4 Q+ e% X

+ j" l7 y% j" h0 M% N5 |　　 〈tr〉5 _; X4 P3 Z  O8 C* H* L% N" w2 E$ t
% Q4 @1 O! K) W* O# P# R6 C* {
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
2 C( C2 a' o1 z- Q/ k, V, l0 ?% N7 Q1 I! G; s( ^$ n- D- O! `0 c
　　 〈/td〉" q6 ]% v: ~: q2 M4 p0 r/ w4 T

) m  [# j. {% n5 J4 ?$ z; f　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉' C, _6 }& C) k% k  N+ m

' Q$ m1 P; n9 S2 A4 Y" k3 V" l　　 〈/td〉
3 F$ ^' s: c  z3 T  I
* _$ J2 X: l8 Q- H8 @& ]+ M9 v　　 〈/tr〉
: A" Y2 A1 g3 f/ C1 T
; N; y( x* U' r5 l& p6 P　　 〈tr〉
. O, H8 p+ k) Z; R6 p3 l% G
0 z. b$ M0 B; M+ a, u' Y7 R　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉( x& s2 n! X6 ?

; V2 V' @! g( A! Z* l5 y　　 〈/td〉
* c) C, {' c( J
4 ?2 |& F* }$ [) r: m: f$ t　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 H- W" f& A- x; y: q

- Q/ _  v6 ]# c; d" l# n' Y5 B
4 O( M! Y' ~4 ~9 X$ V; v( Q　　 〈/td〉
/ z9 ?9 l2 X  M- w; F2 q7 o& L6 b  T" Y0 e! ]) C: G
　　 〈/tr〉
  A9 j. L1 Q9 K8 }; ]# t4 j5 K8 W, e3 a: D+ a1 @
　　〈/table〉

晴天再现

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