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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
! s: t1 Q5 H  S) X5 `. I0 ]　　- b( m2 u5 h' m. k. R* ]8 \
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
4 Z! i, d/ K6 t8 o+ V4 [" W" C# x6 |. e! n
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：4 {/ R$ _' P4 G1 @
: j6 A5 r  ]9 V1 Z* s
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 O5 e9 H" l4 A) i1 A9 o6 O+ J$ f. H" c" ?: S0 U
　　 〈tr〉* W+ Q  L0 I8 t# M$ N  q5 v  `# f

# |  e1 {* w: ~6 C( w1 W- c: `% Y　　 〈td〉1 W" Y4 P6 H5 |6 Q7 u  Q
7 J( [/ C9 _: D! t, `4 ]) @
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉# y$ ]8 S$ l/ ?# K. O. m. V; }
5 U+ @% c+ h( b
　　 〈tr〉, f% w) a$ o6 i# x6 N0 t0 q  K& q

! e1 a1 p5 w" ~　　 〈td〉
- `8 A( j3 F0 }' Z5 _* ?4 ^6 n7 Z- g# C4 w& F9 D
　　 〈/td〉4 l$ r$ t5 g% m  z+ l

3 k1 j2 a$ C2 y, V4 d! y: R! Y　　 〈/tr〉$ w% Z$ O. U% E5 k& w, P& [
. K3 @8 C1 ~6 c! F; |" A0 _1 p
　　 〈/table〉
' c/ \: O" t& g) d) |) A' E, ~* x2 E% L5 ]
　　 〈/td〉
' l7 C5 d5 \# s  i) m6 j' |# A8 T) _$ H) t3 j0 L) F& d
　　 〈/tr〉
/ P8 T1 K3 L; D" P+ C. I
! O3 O4 }9 {* I　　 〈/table〉6 @9 d1 q" n0 F

9 V! A( M- b/ |+ H& o　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
" z2 F! c( o& m2 b4 h/ C4 Y/ y
8 H6 H3 r" [# W$ [  V' g- k　　源代码如下：
) Z; A* ^$ Z) @  J. S
6 o9 ]; }' `( q　　〈table border="0" bgcolor=white〉, U/ y( u) g/ o! ]! u1 n

1 V4 w4 j! @' \+ Z5 R　　 〈tr〉# Q8 H, c: K# Q$ h
; S8 y: C  x6 j5 J( ~
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉% x0 L+ {" U/ \9 C8 {, g+ C
6 l2 \! ~3 S* E1 E9 }
　　 〈/td〉: Q3 B" R9 l2 Q" d6 ]! X! @9 F3 q

+ Q6 R; a. i9 _, |8 d4 d( |　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉* Y) K" \0 l* ]9 b

' d/ c3 ^% A! m　　 〈/td〉3 i, g2 Y4 ]4 d- G+ C& O2 f

# \1 r1 e, x4 v4 |　　 〈/tr〉
+ A, J- Q) U9 ?. c# J
) g' L( v7 Z& j1 p( U' [　　 〈tr〉( K5 A) c0 a5 _) u7 Y

# F2 m. c8 X2 b5 L1 H7 z/ J　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: o: W- c7 i8 Z9 S( r
2 K' M- s( u" B4 y- f! Q+ x　　 〈/td〉
* k- b" N4 l. V) a  h) M8 D- t8 F- g  |. T
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉! }4 d+ C$ p4 i1 y8 m) @3 I

$ O% F1 ?3 D/ e! w$ y* d  s: V" R. A  U3 r+ d. v& C
　　 〈/td〉
. Y4 F2 v' d, ~: J# F6 @
' w/ Y3 M) \. w8 M1 f　　 〈/tr〉
5 m- p/ W/ ]# U& a0 n+ F0 r. i/ \0 [' @  j" \5 l. O0 b
　　〈/table〉

晴天再现

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