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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。4 T. J* r+ O) b2 C
　　- @" s' n' N2 J7 u" j4 I  `
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。6 E8 \; S# j) H* I0 V; M+ z

! X2 m4 ~) \; E　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 z, k9 d9 R/ W8 T1 h: M
. X( Q7 ]3 j' j; s. {4 _2 K
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 o  h6 y  X7 ]) S6 `( L
3 F9 K: Q% S* r& U- X4 g/ c: k　　 〈tr〉' w+ p' B8 K4 p. A6 L" `
! p7 c. g. `1 O% |7 {
　　 〈td〉
  \9 G& _7 Y7 f$ u# o( @2 P1 \; W/ b0 y9 j5 ]6 u' k
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
% b6 y- {- k) V& {% y9 v1 f0 v9 R7 S* N& j6 r* |. A4 i  y
　　 〈tr〉
- A" E! ]7 k7 d) n$ N; e/ P+ a. H) j) X% i3 ^- {
　　 〈td〉
( l/ g6 z7 J! t, f  U8 q# q0 e' q4 `$ e3 j3 C; c; V% ^! a
　　 〈/td〉' S* X0 g7 d* j# l/ L" W2 t; z- Q
% _2 Q4 y& i6 |% X& H  T' E
　　 〈/tr〉
( ^  ]# o  v, o# V: U( U/ o0 k6 i% G, |
　　 〈/table〉: q; \* D' G, p8 k6 b# ?/ J7 L4 G

2 |; Q$ U  T& v6 U5 {　　 〈/td〉
- c# A+ n7 x6 d! r2 R% f+ }1 k2 X& p4 T# |) p
　　 〈/tr〉7 V' m( V  D8 a2 p9 g

2 [5 |- c  l5 k4 @8 A9 E" K　　 〈/table〉* `5 d8 g- R" A; r" x0 y: G

$ F& k  c. Z) y8 D8 [; e! E# n+ k/ n　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。2 P7 a+ \* H& i. h/ U) U5 v

! D9 p' n. \3 V. Y　　源代码如下：, v- ?" v) i) B- R
+ s$ ]3 }7 D% r+ F. L4 G+ q
　　〈table border="0" bgcolor=white〉: h3 w+ s& V1 y6 b& \( ~
( R5 U; h. g( }6 Y6 d' z
　　 〈tr〉
) f- N5 w7 e7 |: i3 i9 g& d! s* r9 L. t
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 r9 J4 U# c; k! R; _  U6 f" `1 A2 G5 E2 r
　　 〈/td〉
  \  Y! o2 ]4 B: V: q
8 a7 R8 s" u/ P- F$ `0 F- k6 \6 Q3 R　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉& J4 i. U3 s+ ^

2 X+ K8 [6 i0 d- ^　　 〈/td〉
1 L. C7 k) q: z1 J4 _# H+ z6 T; `- E: e# k
　　 〈/tr〉
5 L& |+ ]# g" P- m* r: `; \, e' A8 R9 _5 U# N0 \8 r* E
　　 〈tr〉0 o5 y  Q0 r* M4 `8 o

5 {3 a- D/ z; U. ~8 {　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉3 `( w$ P# u1 I( b
2 f' l8 Q4 B$ |" l! n
　　 〈/td〉3 d3 i6 V7 j9 N2 ^7 h& u
9 v( B6 I9 O- C! g5 Y
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
" e! I7 G7 [6 X) {" {
% }4 ]# m* d9 F& S# }) _# T1 W# s+ [" S6 |! r$ w; b# k. o0 g
　　 〈/td〉
% V7 g- v" p7 ^1 Q9 F) _* [1 N
, ]" r+ l; D* g7 M8 b　　 〈/tr〉$ C: c) V! `& M

; s6 y; m& G: m9 m( E　　〈/table〉

晴天再现

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