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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。7 X: i* B/ m1 E
　　. b, K; ^9 d1 K3 O
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。$ C5 V' E# S8 n' g/ _! @) [9 ?9 ]
( v! V$ {6 V$ r. q* [
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
7 W7 R- P6 O; Y. {) {' P" K
8 ~* a( |/ w/ |# f$ a　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
3 K( `7 ]8 `( @" V: \4 k' t9 {* M
　　 〈tr〉
3 ]& f0 _6 w7 C/ o) H2 X2 D# n  N& Q3 t+ L$ e
　　 〈td〉4 O/ E" ?5 Q# y+ j) J- Y8 F

/ ~" i6 m3 e: w" T8 u6 [$ d　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉  ?1 _  ?1 |5 ?' ~$ ^3 |; }

# v5 ]5 K1 T$ Z7 i　　 〈tr〉
5 S' S, a; S' h4 |$ Z& j" W/ P3 @0 g' G. M! d
　　 〈td〉- S. p6 n: W' |8 q
+ b! G( ^) c, K) _; T
　　 〈/td〉
8 C" l4 T2 V0 Z" A& P' \! p  Z4 q3 k# V6 s
　　 〈/tr〉
' o) L$ }3 ]3 K% y! q& t6 i( ^* n" Z; v& m+ e( m
　　 〈/table〉/ {! t8 F1 M# @2 C( W

4 @- z' L9 \+ J  B　　 〈/td〉
, H. Q! g5 h+ _( y$ o* P* Y- ^2 g0 `) K1 R4 x
　　 〈/tr〉
+ {) ], y: R. T3 k6 J8 y, M; a2 j
　　 〈/table〉4 Y4 u9 S2 D9 _% H4 V' _

! l0 t  v; k) U2 J* w) V　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。. o3 H: j, M0 ~  a5 `' I

+ E; B" K8 `0 H& L+ N  u  s7 U$ C  Y　　源代码如下：7 |+ n! O* i2 `2 P8 a

( G/ [$ L/ T8 ?$ D& D5 }　　〈table border="0" bgcolor=white〉( T, ?3 Q2 P. u) m
6 k+ I; p" [2 G$ d$ F
　　 〈tr〉, g  y. K. k' T
4 a9 E0 S! U0 t
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
# C* ~  @8 g, x% I' D4 D; S. X
　　 〈/td〉
6 R* c  C+ F8 s  w/ r( |, n' a, `5 _0 p- K* B& n- Y" y' }
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- }) C( c  X# y6 C) o9 f/ D
9 D. S7 g7 @+ ?% h- O
　　 〈/td〉2 y+ N5 j/ m7 i& e
; Z% V* D" t) q4 F0 r& L
　　 〈/tr〉
5 J9 p8 t* c( G3 g/ l: A1 h1 [2 K& o; r7 g- N+ R8 X
　　 〈tr〉
$ n6 x1 d& N% o) {6 [' n
& G: ^6 A  O; I0 s" u　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
! I' D. b3 D' u3 i  |1 R6 C8 n8 I) o+ K! T. m
　　 〈/td〉- T  k) f) u, v  K: ]$ l3 ~) G6 X

- c. Q8 G4 X2 B1 h2 W7 D3 y　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 _% x1 j9 I5 m! k0 x5 X0 \  K! f% \/ Y
: W1 Q/ R" i! }6 _
　　 〈/td〉
5 a  Q# T6 w- u
% f- S  ~- D) `/ p; p* P; ?　　 〈/tr〉: l- A6 H+ u) \! ^) V: R1 N' x

8 R* g2 m7 ^5 S- x9 o7 c　　〈/table〉

晴天再现

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