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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。" @5 X, k2 H3 `* Q4 M
　　
0 c7 z; q% e" C- d, z0 ?% M4 ^; N; M　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。6 `8 [' `$ y% z9 T) |
9 F3 s0 [: |0 j* u* H8 C0 I. q
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
& `4 k% g) ^4 ~( E  l5 b, _" p5 M! X) {  H
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
- m  R& C- Q0 F$ u  G6 w3 A; h( d! }; ]8 |5 U
　　 〈tr〉7 @) q  a2 B3 {$ }- g0 d* K

4 Z/ M: ^' g. W/ D. L2 L5 U( V　　 〈td〉0 U" s5 X* ]+ l

* X+ d* U" V- r$ ~# ?& P9 O0 z' g　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
# V& J* U) m0 w) k' C4 j+ ^
/ _1 ^. ^& n( O; P　　 〈tr〉
/ B1 k9 u- n) o3 w3 B1 F1 [& N$ `
) S  N# {! {& t5 x　　 〈td〉
: I( Q" {$ \! D' L* }. n! K. S& V2 z; S3 P
　　 〈/td〉
9 l+ |! S5 b; w5 E
! W- `* ~% B$ ^" L/ {　　 〈/tr〉
# h2 a' \# H( i+ s
& v& T0 i# P0 O4 l4 B% _　　 〈/table〉
0 b5 I0 B; w. j; v& @, {9 Y- e4 o) F! a! h) ?- S  L
　　 〈/td〉
! k1 E7 s; D5 }) B/ y- h
  n) `' n- U, t. k  Q　　 〈/tr〉$ b" l) r- u$ I2 t- V' ]4 k% a
4 r) k/ L7 o! P
　　 〈/table〉
0 t) H1 `! w! P0 q. x
% G9 w- w7 e: q) c　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
, @. k, W" D9 z8 i
7 t  H' [) d3 E' y- [  W　　源代码如下：
0 r8 c+ C, Y! w7 A- }0 a! }8 g; ]& F! U+ |% J0 V& V) Z* q
　　〈table border="0" bgcolor=white〉
; ~2 M: W- b- D% j1 s8 W" a, x3 ~8 Z* s" h) ?
　　 〈tr〉2 s$ G7 `8 R2 k3 \
9 f$ U- c! w# I- A& V
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
+ e; ]. V* \( O3 b6 a4 Z2 |2 {: T8 H# s. x: N/ v0 w
　　 〈/td〉5 w' N: X' X& a6 T& {' Y/ p
/ U: s, _4 w) \
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
& J. W5 j( {" o
+ z2 P) w; @- e1 C" T% s. L　　 〈/td〉" c# \. \3 T1 l2 W
$ s3 U! Z, O4 H+ c1 s9 f
　　 〈/tr〉
, T4 @; x- [* f% K# z, a" `. G  Z' e& m5 Y" z$ [
　　 〈tr〉
4 ], U% I+ m, \4 I! K% S# T
2 P2 j2 a) Q8 N" Z6 t1 m　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
6 R% Y8 z  K6 w: K" ?; o1 f0 |8 o1 ^* @+ ^# V
　　 〈/td〉
0 T: f/ H! ]6 ]! `  H3 T& ~% s. y8 R& h4 y$ b; u" L
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉% l4 t/ L( c% V2 U% z. ?2 w

8 }% t3 r. I" J5 B9 Y7 D* y. s5 q' `
　　 〈/td〉
! \$ _7 [2 W" W7 K2 P; g+ K4 l
　　 〈/tr〉8 n+ m4 ]) ]% h" u' v6 Z) _- }
/ G  F. e' r8 H) t5 z; Q: W! ^
　　〈/table〉

晴天再现

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