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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
. `7 [& f6 o. x" k% }/ d/ D6 J) ?　　4 f6 S- ?9 n4 X: d! y* s: U
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 |7 s6 t9 e6 _0 K
7 t; _9 M' L3 `0 S) H  J　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：$ n3 z' A/ }4 q6 q8 }' I- L
7 N: d, y$ E/ R  X' l& p% p
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
; E! c/ T0 n# r" B. O* x& r" ~9 k
8 W$ K* T4 y  U' M# U5 _　　 〈tr〉3 ^/ f7 D' ]- g4 h6 N( b) V. e5 L; k
4 ]7 ?( m, x7 ~4 b
　　 〈td〉
4 V4 X7 ~) M% F8 E4 T
; ^. M4 e. j: ?* R( r" Z9 g/ b+ O　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
8 N' Y( k+ F  h' u, V
% d  E  f' b% S7 ~7 k# |　　 〈tr〉' m9 L8 t& ?/ [  b
; D; A+ J" z7 o9 V
　　 〈td〉- ~) p# Z* s5 `# G
) ?7 @/ M4 z% j
　　 〈/td〉9 K' Z# u! h, ~* o: n& ^  Q4 t+ r

* m! I& M: c. Q4 x) ]6 z　　 〈/tr〉
2 Y  T, A/ U" |7 n6 C$ J
) k* \3 Q# O- m2 h; {　　 〈/table〉
! h8 {' J9 b. l+ I+ K' W$ Q  |# V1 w* {6 Y
　　 〈/td〉# X& W5 y4 Z3 k

# u3 X7 A# m' t+ B　　 〈/tr〉. m; B! ~6 M1 p( W, d6 h
: ]% P& E  ^# p1 O, u2 p5 `
　　 〈/table〉
5 i" R% ~) h* ?" U3 I: \2 ~: N0 G+ D1 q8 |. j
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。0 I' X4 j! ?3 J% v6 ^

0 n9 ~2 {6 ?0 ?# g　　源代码如下：
4 ]6 m) {) H* J6 s- r2 e% a* y; L: V4 S$ o
　　〈table border="0" bgcolor=white〉& v6 |. C0 m( R4 P* H* [
: I, S/ v' ?  w1 s0 }+ D  p9 \6 I
　　 〈tr〉9 |! E- X  R, B) m
) S9 W1 L6 G( f- n- |/ A3 @/ v
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉: p# x7 |# R: w- A3 i& N- u
" `$ E. v' S! S5 b2 F2 x
　　 〈/td〉
8 `. ]6 U) _$ H5 {0 }
2 L2 E" Y4 M$ l9 B　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
& o9 D6 p! h  _: V8 @" {3 z* J, k( C: }# E+ N4 j5 @/ \1 ~) j* ~
　　 〈/td〉8 t! x5 W- @6 i8 i

& U; Z8 ?0 R0 M% J9 N　　 〈/tr〉6 h( Z- f6 j2 o" F) a

4 I: P( @2 ~, Q2 n$ X' i& J6 u　　 〈tr〉0 Y3 g- s) }4 t! y! v# Z+ @
/ ^# p# K1 R$ E8 a8 h- ?
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
+ \% F/ ~' `# J) g, W& I
- D) n; J3 f( Y+ A' u　　 〈/td〉
$ E. o. z/ s0 B; l
1 f$ Z6 `9 F# H　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
% |% Z' Z9 Y  ?8 C+ n: \5 l( {0 O- i
: Q0 S$ G/ J; w: Z* O
% h% _! D+ I9 r- O　　 〈/td〉: N7 {! E2 Z& d# P  h+ }
8 G7 U" r7 l3 w# Z' o& N
　　 〈/tr〉$ Z5 Z/ [+ |" r4 p4 f* }
$ E) u# b0 ^2 c$ @' Z
　　〈/table〉

晴天再现

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