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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
* U$ l- \# a8 @+ \5 ]6 A* Y　　
  L  n: D0 ~2 Z1 n1 g　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。8 t! B# s/ {0 z. N. n
5 {- `- q2 n+ T% ]
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：+ p0 E  _: n) S$ r* [. v2 w
2 ^  t5 t1 ?- \7 n3 E5 m# c9 S
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 o! v0 f& ?8 y! q# M/ C2 S1 s7 B- Q6 v: y* h
　　 〈tr〉4 ~/ [, S. S: E+ \! Y5 I
7 |0 g8 e: M; S$ V9 Q
　　 〈td〉0 g% R6 [' d7 Y" ]$ E) U
+ U4 @; t$ D; g8 L6 z
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉8 L: e3 a! s7 M3 w) q
0 {% N0 R( U. j# t3 \- q
　　 〈tr〉$ I1 ?- B! ?. [( U  p% |# }
' n3 J8 R! r+ q$ }# m
　　 〈td〉: }. M2 _3 d1 K+ M# t% A& h

7 v6 ?. M- N  M0 _# {6 V5 t; Y　　 〈/td〉
' N8 e0 L, Z* P: k/ d
! g0 X- }6 ?! z! Q8 R' i% |, `5 q7 J　　 〈/tr〉' _- f% [- M) ^, F2 e
+ K" G+ _- W, E
　　 〈/table〉
" B7 ^6 Z. x8 j% L: X% f8 k% A2 N* P0 t' P$ l9 Z
　　 〈/td〉8 |2 |' c8 b8 t. ^  ~5 l* c

4 E+ N' R3 B. K+ U" q: Z　　 〈/tr〉& {# \2 q  B" l9 P+ z( {; r

) k! O! o$ n# M# @) v, b6 i+ p' k　　 〈/table〉# q6 F3 X2 j7 E1 n9 D

- L# c$ [2 R4 ]6 R2 V& F0 A3 |　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( ]" z' K8 v! R& K/ U) a2 V' J" |1 `4 I
. j( e, D  b7 i1 z  ^: A
　　源代码如下：1 y% x0 M. g6 l# P! A5 q5 [- j

  ^9 e. H% p! Q6 C$ F0 A, {　　〈table border="0" bgcolor=white〉% ~/ r$ z3 L' b5 A1 R2 e/ n

, C% e3 k+ U  \/ B2 k- r　　 〈tr〉
% ]  N; f" ?4 E2 A; U5 p
5 ]! @  T: g. o　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
5 M! l' r- q8 c/ H6 M
  _2 ~, F5 ^+ z! y, ^, C; }　　 〈/td〉
# t* [6 z9 }8 p0 D3 o6 i- {! P% f# ?- Y' S3 }  D
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
) Q) Y# S* P0 b) F" R* c" v# V
8 k) C* R8 C  u- x1 s8 W$ y9 \6 P　　 〈/td〉. j" i8 _. V6 ]; E# h+ y7 g4 c( b2 w

% T+ M, D/ v  o9 i　　 〈/tr〉  P' {' _  p" M

9 A  s& z8 M5 d　　 〈tr〉6 i& B; L5 |# c3 m3 h2 {
1 P8 U# U0 S- @* ~3 S
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉5 W& W/ e  Z. q  T& E9 B

' K* ~3 U9 q5 u+ b1 J) f! Z　　 〈/td〉
' j' S1 }  s4 j9 U1 g/ I, p( s5 g$ f/ D+ p5 t
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( N5 f- i; w3 |$ l

$ Z, t5 Q/ W7 M4 D% D$ F% u2 k# k% D  R! N( y5 L+ l
　　 〈/td〉1 \0 O# b# N7 e+ W/ ~. |7 G) o1 W: o

2 B; _( }: b. Y* P9 v" Y+ e　　 〈/tr〉
/ T0 H" G$ ]2 L! K
8 F! q3 [: X* ]* \　　〈/table〉

晴天再现

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