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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。7 w& }: E5 L4 X3 @# F* p; X& [. Z
　　6 Z+ p9 ]  d' l8 q0 y
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。0 j  A  I+ x5 L0 J1 ?3 |+ C
) Q& o9 }9 N2 y& L# j6 _3 I
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：: y  x6 @3 \  ~6 B

* Y) y1 Q' ~& J" x　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
$ G8 k4 p- k: N
1 t  G5 \6 ~. v2 t! e　　 〈tr〉
: ^+ }! |, F% U) W+ F3 {9 ~7 o/ l# ]2 {3 ^% c. C; c3 t' k/ M
　　 〈td〉: M) C  x3 B# w5 v8 J# B

* w& Q+ v$ B! r+ e6 G3 i  c　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉" f( ]! B$ ]) B. [9 V
5 c+ G* {7 k  _; w" n
　　 〈tr〉
  ^" E7 q9 L( N% q3 r  x# [- ]0 s  j5 _/ w4 O
　　 〈td〉" _% J* b# Q* e. w: i7 e

( }& B0 k$ w( ?$ ~! Q* {5 c6 s! X　　 〈/td〉
' }& {$ h9 \- M: B1 R1 c9 g8 h! c  p1 p
　　 〈/tr〉. T. r- q9 `4 z! |$ c- x% }) ]

8 z2 j' ]2 u) c! ~2 B  _　　 〈/table〉- c5 O9 Q9 j1 i9 j8 t2 `# A
  q4 [1 H# b# K  H
　　 〈/td〉6 Q% P3 x- H# J

! P$ P8 _( W; C& o: E9 L# h' w　　 〈/tr〉
# ]8 q% `, w' l+ U6 i3 j5 R2 ]9 z. G9 \" y+ M
　　 〈/table〉. H& D, ~$ V' Z* V: W1 }7 w
% W+ V/ I7 a1 M  F5 |( {% Z& b, O
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
% {# o  [( R/ f$ w0 [( N$ ~9 X# \% C& y' j- _' K. u
　　源代码如下：# N. P! O8 L& L* P" @4 o0 X
+ d6 J) I7 C' f' C: B4 i8 a  {
　　〈table border="0" bgcolor=white〉
& I" }( A4 l) Y0 J# I# d0 [( T1 d2 f( I) _, J. N7 q" P
　　 〈tr〉
$ L% B0 s2 r. z! Z; Z; C- x
! R: Y& U+ I3 p8 F: O1 i　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
7 r8 L, N: F7 _- q' q2 ~' W
+ @3 G/ A2 O, \1 l$ \! U+ S6 M　　 〈/td〉
- q3 q! {2 ?0 s; y) `7 W1 o% H- k* E7 {# A
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉5 @$ n3 I1 b/ ?

2 C" v0 Q. J; l8 x# h　　 〈/td〉1 ^& n- L# B8 W3 D/ h: g

5 [. B# P; C  y/ I) E2 V$ o　　 〈/tr〉) M+ |0 [0 T$ i9 i% e) `
6 g+ Z5 G. n! h7 I
　　 〈tr〉4 ]8 l4 x( [7 ^8 C

8 Y2 M" [1 g: w8 f; M: n# ?& |　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉8 v6 E3 T7 T5 I; h2 d6 U- V- ~

$ N3 S$ q9 s2 V1 g7 {4 ^: r0 m- x　　 〈/td〉, D: M! k. P  K

% A! K% H: }4 t0 P' v5 K　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉! T9 ?! ~2 j: q, w$ t1 L" s! ?& h

- c0 m, ~: Y6 u/ B1 ^' v2 E+ W) ^- d, i( L/ {, P: ?, y
　　 〈/td〉3 w2 P- N2 t0 O6 {$ c3 b+ I

6 H! @# K2 r$ o; T) d: d0 W　　 〈/tr〉
! G( A% z( F. G/ p% L- i6 [4 _9 G0 E6 o# N6 T' I6 G9 ~! m6 V- ]8 p9 D) N
　　〈/table〉

晴天再现

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