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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。5 t* f9 n) X9 T" P' C
　　
" R8 O- A/ u9 h　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
4 q! q1 K0 A, D6 z% [  `% ]: T3 B( `: @6 K2 a2 u" t) V! ?, {
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：+ \: Z" r: X5 \3 ], L/ W  n- N

- l4 @, v; V2 s1 }2 M　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉7 S& z0 d9 D8 g9 w. W  ^

/ @% g+ O) g! m　　 〈tr〉
' _: h9 B: P: t3 g0 B( s, e* o1 }+ S2 C. `' V
　　 〈td〉1 C5 q4 j3 |/ H3 @7 k+ d0 |( t

+ v% l" Z  h' ~# p" C/ b　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
4 h# s$ }/ t* W  e! u5 [$ R! Z1 D) d2 H4 ^
　　 〈tr〉
0 Z& M- n+ C) w9 B% @0 c. f, s+ K; `# `: j
　　 〈td〉+ z) L9 C& u  I- g. M

: i9 Z8 C! ?1 n! y　　 〈/td〉
. |  z% O9 Q* H0 k$ |& j
0 l/ e% S3 {0 c# \' w　　 〈/tr〉
9 q! h/ e  L- C! Z# N; B
8 O/ X6 l6 U6 F  I$ d6 y4 V　　 〈/table〉
( ]& [- j1 j" V1 T1 \
6 ^. ^. S& g* |7 o　　 〈/td〉
% @& P$ H) {5 z2 s! z/ Q& p
; N8 r2 ~6 f9 w/ q　　 〈/tr〉0 g+ H1 O- D0 p

4 N* x4 W% H# E4 U& ~/ q+ w　　 〈/table〉/ B9 ?& x& F1 e. o

; I! p- E! c- B. R" x1 V0 a　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。" ?: Q8 T+ Z! c0 D9 y! x
8 T. {% ]4 y' b6 l1 r' S% k
　　源代码如下：( }$ D2 {4 \  R
* s' G" v/ k9 w5 v: @6 ]0 g
　　〈table border="0" bgcolor=white〉- K+ M9 c! E! q5 H/ N" R6 f

& n1 d7 j1 p( y) q: S　　 〈tr〉
1 L2 _# @. e  E, P3 Q  K& O2 a8 A  e
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
# e/ \5 |5 J9 r7 K2 {: A
8 f- M' j$ h; r0 L7 @# e　　 〈/td〉/ n6 T( |  p" |3 F
& i- j$ h, b5 n5 A+ k
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉9 s5 c9 x8 h+ A% T& R! P

. }2 e( s5 }0 u3 L& Y1 G　　 〈/td〉
) D( d+ X8 ]+ ^, t' \2 [# _' F+ l: @2 O
　　 〈/tr〉
# ?9 h: G0 r+ l: G" G1 m' P& b4 V8 l5 {: [$ a  k$ N" E
　　 〈tr〉" a2 ^  L) M* t

/ e6 \# m! D0 ?# P% c　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
. f, s, Q8 o$ ?0 T, X$ f4 I7 f: m( o* z) H( y
　　 〈/td〉
7 _4 J: r! E1 T) j0 v; H
' K, e$ H- y6 z0 o　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
3 E( }6 Q; n7 F& D; [; ^' r6 V% I. ]- C

; O3 G1 p# A& {7 b1 J8 P　　 〈/td〉
8 M* r1 r% c: `: N
3 U. w. _) {# D0 z1 v5 b7 {　　 〈/tr〉
0 z. T2 y3 I" l1 a) E4 P5 j' ?
' U7 o' ^  F0 q2 T7 l" x3 r　　〈/table〉

晴天再现

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