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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。- E! Y4 L. W6 J3 G5 X
　　
% `) X# m; N& C/ D! z$ B; O1 o& l　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
* @2 H+ L! ?1 X/ [) T6 m& j+ v
/ U5 z: Q2 f% J, P8 z6 g　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：7 ]" s' ~4 v6 b+ x, d4 ^

# _1 |+ L3 P) ^/ G# q8 E; y; {3 j　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉) }0 O3 Q+ x8 W$ K

9 Z+ }3 _% p. Z8 @: L. y: a, y, n+ S　　 〈tr〉
3 c! F2 Y7 s; @6 W/ o7 t' X9 L! ?+ S
　　 〈td〉
7 `' U# {: @$ q8 ^1 Q1 ]. k# c! o3 t4 i. i  I9 C2 n
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; a/ V9 F. Y, {: @  s+ W3 L1 c( s  z( U# a; B2 O
　　 〈tr〉
5 D. x) m: M1 |5 U
- N0 L) R9 v; m　　 〈td〉7 J" n# E( J; P. w; H! n! A

* i! D& s  o* S, R+ r　　 〈/td〉: Y  |. r6 a9 c; ]
! `* ~% O6 I4 X: M0 m) u( z: B, I. ~
　　 〈/tr〉
9 M: ^6 X# [: v- Q$ G! L& @- _
/ h: M2 T2 W7 f. v　　 〈/table〉6 b  E: m* q) A& M. S) l" w; m; Z
. O( @" ?. v1 L! c
　　 〈/td〉! T& D" P% X% F* p# I6 ~# F5 a

+ \6 e3 b% G, I4 ]$ Y　　 〈/tr〉
: h4 k! G3 ~; R% @# t  U: A2 T. I$ q5 z( W
　　 〈/table〉! C6 a; c) L6 u% ?- g: o! l
  g3 m$ O/ r+ `! g1 Z
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
# j2 ]! e' R7 d) B8 ~6 i) k$ n2 H" l
　　源代码如下：
8 Y6 {/ @' W$ Y1 l
8 L' A! ?+ i# o* u. v! ~2 j* r　　〈table border="0" bgcolor=white〉
( V  B" [) K; T3 I' }1 [. b: j( j3 }* V
　　 〈tr〉
3 _' E- ~/ L+ _) M+ T, Q9 [4 y5 G& i. Q: }' F
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉2 F  _9 w# [; |, A

0 n  [% S2 _, O( t　　 〈/td〉/ p$ G7 u, X9 K" m
, g7 a: Q9 E' k7 ~8 `- v. {( H7 a( ?
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
+ c6 J7 m6 N0 T2 ]  F1 \  o; c
7 P  h- I+ w7 O　　 〈/td〉
9 Z( j+ I1 [% r6 d+ X2 G! U: c$ v& [3 }, y  O, B! a
　　 〈/tr〉
* B9 I$ N3 Y/ F2 K* Z/ P: B) a  }# B/ A  D5 D. g1 y% X$ n
　　 〈tr〉$ ]) I* Q& ]8 e6 J

  s2 T1 N& U$ E  N3 P2 Z　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉0 ~3 f" p( z, b2 o: t

7 J" g1 h$ X+ D- [& M  F　　 〈/td〉2 A: f$ A" ]6 w2 [5 F/ q

1 P2 R/ p- {, {6 a　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 W4 `) o4 _, M7 R: @) O) X6 ^2 s
6 ~+ i- ~0 Y: W; o+ t: K% z+ u$ y1 ~' G/ U2 R
　　 〈/td〉
0 H$ q+ f$ W0 n% I/ W, u
0 i& j# w# h; H* z: X4 K9 ?　　 〈/tr〉
6 `( m, C; f' u3 `% v8 y
' }$ O1 _1 G( b$ y# C　　〈/table〉

晴天再现

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