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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。3 b: k& j$ O$ u  q+ A, j$ t% o! q6 c
　　
3 P" D# k, a( a1 M　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
6 i; g2 e% V  l4 n5 @) P* _* m/ h( u
2 W* n9 V1 {, c; ?　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：+ U. X; V' q8 F: R  a0 w
6 W# }! o8 r& w5 |. V0 K
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉# Q5 L$ O3 J- u% _4 ^( |
. [" R8 D8 l, |* x* `
　　 〈tr〉$ ^* v5 L) c2 _' d: }) r

2 Z& ~* a+ S2 j; {# \% r; v$ H; o　　 〈td〉
/ i& y; h8 S) l- }, p/ h! P: ]5 s: J+ I& O
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉5 Q- H+ }2 u# m( m. P
/ [/ v+ x' ?, z: l! ^) e
　　 〈tr〉
) H2 m6 ~5 J/ ^  V/ E5 P6 L) {" _+ O9 D  b4 m$ L
　　 〈td〉. F: u& h; N: {5 B4 `

  G* C7 P+ q! H1 n/ S' Q+ ~  Y3 C　　 〈/td〉
8 B: U" o* c# q) q" Z
8 l$ E: H# Y/ c* M& @2 B) ]　　 〈/tr〉
9 K/ R/ r1 R$ z3 u+ n$ z( l, O; D: ]3 b' J/ \
　　 〈/table〉$ N8 p- O/ \: |" V5 x) y
# N. d" _# w# M) v* \3 }, z
　　 〈/td〉0 }9 g: j. j' Y6 t" }
# y+ C2 B. H9 f' o/ _5 ]
　　 〈/tr〉
* l4 S! \, J# c" s* K. J1 \' N# V/ z- H+ z2 v
　　 〈/table〉* B: i/ q0 I% W; U% [4 z' N
1 s5 s$ B) C, B( K  d6 Y: H
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。! L, C& G9 r8 d/ E3 _1 e
9 ]( g  q$ L) \% M2 Y$ T- O8 u- g0 [  \
　　源代码如下：
9 j' s# h1 @, f/ |+ ^  K3 r
% P9 a5 h: Z" P* ~6 `' u: E　　〈table border="0" bgcolor=white〉
# h% q) P2 n' Y! K" ~
5 p) n- F$ o% v# n' r7 X9 t　　 〈tr〉
7 c! P# s  i3 J# M7 D  G+ |' r
1 m) z, B2 p( b) U0 W/ y& |　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉/ o% s8 j: O/ f6 u  Q
! F6 [0 \. b8 G1 E
　　 〈/td〉  F' i8 `" Q+ ]8 T% P7 g' B5 I

* N  W$ v, e1 L# I% Q; d7 P+ |　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
0 b& d' X1 }# Z1 l2 V1 v) b2 B( `; ~3 T: s; `
　　 〈/td〉
1 G5 x; u: u' u, G& r% m4 [& v: H0 z* L  c4 N& }& D& k' A
　　 〈/tr〉
0 j$ O- ]+ G# W1 x5 ~( s% d2 F6 L3 E' ?( ^# [& G6 I4 D
　　 〈tr〉& E, G! @1 r6 B2 R1 T- y
, }! ?1 v. d, [% C# i
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉- Z9 b3 ]& p' j9 l) X; W7 l

/ d4 `! C7 V" `* u; e. W　　 〈/td〉
0 q( }0 \+ F' k9 |& b! ~: q9 k* P. g3 V+ {% x  W7 U( V
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. f6 w0 b: R) F
7 r  e3 u0 B+ o, W$ a7 ^1 X
/ T6 r( v. ]9 q' V; U　　 〈/td〉
0 |6 ^9 k8 y4 ]  a6 i$ Y, z+ J  t. e
　　 〈/tr〉3 `1 ^6 Y, p) _6 v, k
" u3 a: [% M% P! E* c; ~
　　〈/table〉

晴天再现

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