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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
- [9 ?+ F  e: L　　
% F0 i# _6 q, b& W+ ?* x$ z, c  _7 a　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
. a- ?6 K" L. F0 Y. e3 ^* j2 B  H* v, s6 I4 D2 u+ N
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
- W; g. i: ?; ?" `+ S0 e( z
" [$ i; L1 I6 {3 B5 C. o2 b　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' a: a+ O4 s& k1 z* J- C9 Q, c- M$ y2 z
　　 〈tr〉
, ^* o2 `3 N1 U( k6 }' \$ {. n$ i1 ?4 F
　　 〈td〉
' v. z+ o5 \3 ~2 [6 ?6 r4 g: j) ?& }9 x! x5 O4 ]: [* F4 r# e" P3 M
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉# [" T4 ]0 w4 U; v
- C5 a) I: l1 E6 A9 J  k
　　 〈tr〉
; a8 F6 B5 m2 Z8 q( r5 L; v7 ?/ C1 r3 x! Y9 Q/ l/ \
　　 〈td〉$ U; @2 q! @: s! @7 |% K
: n& c6 r( h0 i  N- D/ t/ X
　　 〈/td〉# P+ ~( N; I+ x+ H- Q/ p

/ X, T9 w% Z* H　　 〈/tr〉
. R1 }; }( q" Z  r* S1 C$ Y5 B$ B' O2 V& I  l
　　 〈/table〉
2 ^, p0 ~; H2 E  n3 j: q/ c) l
  q  E% w; A" C7 W6 W+ Y　　 〈/td〉! X: `8 D) T. ~* R4 t# c9 l. G
- ~* }$ K, o7 U, G
　　 〈/tr〉
7 L( u( w3 ^$ E. g5 W5 H" c# [4 Q: e% H7 P( m# E" Z- I9 J
　　 〈/table〉
, ~- N! q  j6 G& Q3 C; w7 e2 d& Y" Y
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ L  f( C2 B0 `% A
# L. f0 K8 P4 }5 m+ i　　源代码如下：+ \' X; l- R9 S) g
% q9 \3 Q: |1 o/ _& W3 ^
　　〈table border="0" bgcolor=white〉( x" s) q8 \- z" `( n1 ~2 T& O
: i* c  n' W7 p$ l- g
　　 〈tr〉
1 H) q! h1 o6 e: R6 d. P) e9 P0 k
1 K, H5 o# W* v% `　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉; \# d" r' u  O

, `- ?& V7 f) T! b6 W4 |　　 〈/td〉7 j4 N4 j1 \' s) H# |( N
, b0 P1 N* ~  P% _
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉' Y9 E9 u+ G3 `. P/ p6 ?7 j
) R; x2 a) h) R& Y" L7 }
　　 〈/td〉* `  M) H# c5 `6 O  B
! g: T& U/ s. z
　　 〈/tr〉
# y1 N- \: v" W+ ~3 F7 u8 h' \1 y) N0 z2 W5 E& g+ e
　　 〈tr〉3 G" {2 O8 N& n" ?* P

% {8 K6 x7 O) C% M+ b$ ~9 Q) R　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
9 C& b7 E1 l0 E6 m2 z6 N! m9 n* T! a7 Z+ f/ x4 W: f
　　 〈/td〉
/ [2 s" q/ N% w( i+ {6 z
* q; |2 T9 R2 p　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉, Z6 r6 F* ?" K' Q% _

9 A: E2 i/ w; h9 A  e& n' ?: ^: o
& ]  J  q5 x4 u! Y( K　　 〈/td〉
$ z3 O8 q6 S- A8 M* {% [: U. J+ H9 p+ o% i6 ^9 l3 K2 C2 G3 x
　　 〈/tr〉, O6 S8 ~# \) e: |# w

2 f& ]& I: x5 u" V6 k　　〈/table〉

晴天再现

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