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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。+ T2 z! z% Y- ^
　　! I; P. J# e3 [) L
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
5 W& t. _& l3 Q5 ?6 G) A
  W9 @: p. E! [' z+ d' ]- d0 f# a　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：8 X, p1 F$ \# C! r0 a
( m3 s$ C5 E2 E
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' h$ B% r$ U. e
  q3 m9 n: J' X/ p$ D* u　　 〈tr〉
# j0 J( U: J. r5 S6 y9 @- H$ k, a
* N7 r- _; o; q: `　　 〈td〉/ M" d. Q/ I8 W# ^8 g1 s
8 `" Q- Y+ F' S6 A& l" D! p0 J1 \9 Q6 [
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉$ R) i- v- N4 j5 S) Z

4 V1 i. F) E! B/ m# f# \　　 〈tr〉% q6 T6 l: ^: [: q2 H  U
  f" z; C/ Z8 O" u4 J' Q
　　 〈td〉, l5 b+ Q2 }& y  @4 p# I
) X8 H& O4 x" J2 J; R1 r9 E
　　 〈/td〉% R" K+ Q% A0 a! R5 y, \

5 n! a  K0 o0 z- e1 f8 I　　 〈/tr〉# a# A0 p0 N2 T

) I; X1 s, N9 Q7 q　　 〈/table〉6 V7 m0 J5 h) p2 v" V9 P

- l2 I$ z. S& P* }- f9 r　　 〈/td〉  R1 g* B+ z' H9 ?( i
, G" z- y  v6 ^9 [
　　 〈/tr〉
+ ]2 m6 N! ~8 Z, \
, J6 |  ^" r- P! g  O　　 〈/table〉( C  W1 N* b9 e
+ O  c4 }" X+ N
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
0 O1 z$ f  {/ u  i  }- t4 r: }$ l& H1 C* Q
　　源代码如下：
# m! h, F6 T# t4 z- b( l0 R' O
+ s( @4 {( l$ |5 J: a( L' T　　〈table border="0" bgcolor=white〉- p1 D) b! p) v' i

$ s; E, {8 H' k( n* O5 B2 x5 i2 D( t　　 〈tr〉; D* t8 u2 p$ X
! g! a2 ?8 P3 a, N$ _" s
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉( M, P% J" A. A2 K- d" e- D

2 T# O! N# L* U　　 〈/td〉
% Y7 i0 g7 I+ ~6 B7 m7 c7 V
' V. y& X- C) ~7 J, }8 ?: d　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉3 c7 R- h  y; b% O/ x

3 Y- K. h/ G1 K. z　　 〈/td〉
( c5 O3 E8 {  W* e. J" @4 E+ o5 O, `: T# K) v3 s5 @) A' S
　　 〈/tr〉" e3 g( K/ n$ G  a# ?  c- Q

+ R4 U2 |) H) w" O1 K　　 〈tr〉: s! E* `3 B' Y1 E, k; R% q
& J5 V2 T( J! Y7 r
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉$ N7 G, S+ g1 p  C) |* ^8 u& i

6 r! G& V# c4 Y' T7 i: T1 ^2 }- U　　 〈/td〉: V1 K8 u8 p. }" w
# \2 ^$ P$ S7 C1 d1 b% h- P) v$ `
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 h, c$ N$ `" I/ y' `, T
. P- V0 ~9 p) S% N
' n$ u3 w2 w. |1 f7 N- I' [
　　 〈/td〉" z! }# s4 E4 K4 K; N2 v! A

1 K: m9 ^) J; `3 N3 p% S& a, F3 ]　　 〈/tr〉' o, B  [: r4 m' u1 ?; U. Q( S

- F; ^% c! x' ~( X; ^9 k　　〈/table〉

晴天再现

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