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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。- }' I' u" i. w  |
　　
) G7 E  H- n- R  s) \0 Z　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
8 e/ {$ w" x6 B) [- p- t
" s: s* C9 g+ ]　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
+ \5 ^, r2 y; a/ v  l* L( B0 o( v( W
; p7 S1 o! S% l9 C4 S　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉( \& S6 p1 T& v1 {4 P
( n( a- |  e7 c
　　 〈tr〉
# ~* C5 k- H+ w  v6 v- {# v; Y* u' s4 _0 h1 ^- U6 e
　　 〈td〉
/ j/ z: X' |( m' a; a0 s9 E: G
. \( j; \( T6 B0 G( f　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
7 }* o# Q. _  P. _: R1 ], m! A# S+ t  ]' d9 B
　　 〈tr〉
9 ]* F9 @$ N- k  i, v1 m3 p' D- V7 D" E. p2 U+ X
　　 〈td〉* D2 w6 g+ y  s: V* E

$ C- W# g4 a( q" U! C4 K5 _4 `　　 〈/td〉& s0 {8 F0 r1 O

: E! |8 C. b9 u1 {& p　　 〈/tr〉* M2 |0 a! W: _% C4 `& T
  p2 S6 k, q, q1 a+ X/ @/ W0 n
　　 〈/table〉+ Q6 m0 }# B5 b+ A8 [1 f- P: q7 M
+ ?+ |4 Q- N& Z
　　 〈/td〉3 }+ x+ Z; o9 T
" n$ B! o" A2 ?/ D* K- ?- I
　　 〈/tr〉
3 ~! e- t; }# z' ~# ?: @' H8 i" A  d4 _; a
　　 〈/table〉
. {0 b: d% U, H3 v) c8 x8 P/ U; k( Q- [
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
7 g1 T7 P$ N4 I2 J$ P3 |5 H: D6 M) o6 E7 |- a
　　源代码如下：
; k  Q+ w8 e+ Z) Q) f6 @* b0 l- _7 O" b3 N" C
　　〈table border="0" bgcolor=white〉: N/ H" Z' P; K0 k3 i, {
, t3 @: g( X( D, I
　　 〈tr〉. i: x& f+ ]  C, ~
3 y4 S, w- W/ r  ~
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉4 @/ b- @  I1 [0 ~$ A7 ~9 w  o
: b8 o# G  X+ r' j
　　 〈/td〉, j3 C& i, O$ w
: s1 U2 T( V* T% L4 d
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉) L4 v& Z4 u( N% x
! e' J' s/ e  c+ h) s
　　 〈/td〉
9 @& y8 }3 s& \+ e+ E8 t: z
0 Q6 G9 T; k* U+ ^$ {  e5 S　　 〈/tr〉
, J  B( f! D4 c) W; j5 s& ~+ U  y+ j, w
　　 〈tr〉; L- B4 a( e* f( K9 ^

. o( p5 x2 ~7 x3 J) q　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* `8 L5 J  I  O5 X
1 x: m  d: ^* S9 ?　　 〈/td〉6 M' G5 Q$ E9 V) f4 l

' j8 y" L' N8 |) K% G　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 @( O, V1 a/ Z

9 B, L8 o, Y0 V2 {. d0 [/ N  w
　　 〈/td〉
3 ?: D; Y: l+ W1 v* K: Q( w2 k% @3 m  P1 f9 M* b
　　 〈/tr〉
5 b" O$ k+ |5 y2 Y" M0 y4 B' Y4 `  e# C
　　〈/table〉

晴天再现

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