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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。* P9 _) w& u1 m; l
　　
7 ]* g6 A2 C8 [% R6 [6 k5 Z3 |　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
5 @5 j7 d# j) u7 Y+ n7 e& s
+ z1 r9 X- [: d　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
) m8 q! ~3 t  m& o0 r7 U8 s( h! w! u) }- L  H
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' {, c; V" [* _! j8 w& K! g8 ~. n
　　 〈tr〉
# b1 x7 z9 K( t1 o  _4 _, M4 D7 z! o2 C/ ~8 {0 ^5 o. m
　　 〈td〉
4 C# H! K6 F: C, H8 c  D4 x* ^- z1 Z7 m& q
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& P/ W& Q9 w9 j
# }5 @' w9 @! k( g1 S! @　　 〈tr〉
+ }- _( J" ?; v) j: ^* a' a/ `/ a" A& s6 M
　　 〈td〉
; j: `; Z8 |* {0 I1 S* K  P2 ?) A$ N1 u# c
　　 〈/td〉- m  [7 p/ M8 t- x5 c

: ~) `* i- u- X% X( w. I　　 〈/tr〉# E: n+ m3 x+ T: Q& z

/ W9 U4 v) F. N7 {2 O! n6 I　　 〈/table〉% D3 D% x) D* X& |8 @# I& }+ U

" ~, I) n( l) v' [: H　　 〈/td〉9 c$ q2 z# c$ I& d+ z% r4 _; c
' N' }  T6 W$ R
　　 〈/tr〉
) J8 K8 e- K* G- g
* a( I) T& \+ o0 \# l: {* S( {　　 〈/table〉6 v2 g  O& s$ I# [8 N" l
; K+ u/ z3 g& J; Z' P6 Y
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。2 t' j4 ~9 {9 l+ i  S

' I) R9 x1 d& r& T% `7 t7 r　　源代码如下：* y8 n- z- t) P+ T
  m6 m3 S8 |: @/ G. }% P
　　〈table border="0" bgcolor=white〉# h/ x. l5 U2 x% P8 E
, Z9 P' Z/ C0 W: U% g
　　 〈tr〉) q1 I) I+ O& k5 F' F

- U% D2 _( B' u　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉4 {, S4 ]: b( u' ?$ d) ]; w
; l, Y5 M7 c  z) K
　　 〈/td〉4 N$ P: @' i* N# C# {

0 p$ ?$ u. x$ O# b6 L- ], n8 ~　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉) H9 K0 |9 x: a: i8 ]/ S, V

& E  l9 \/ [$ T. g$ c' x　　 〈/td〉
5 d' D, k& Q( t4 [! E/ {( k2 d" c. c4 U& P
　　 〈/tr〉
7 `# q# n7 v6 ^; K2 ?6 [1 o( F
: t4 M4 {$ n8 V* J0 _6 S5 ^　　 〈tr〉
0 t& x$ j( m- J+ q5 a( R% K# N3 l" |8 O, Z1 c" h5 }, k
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
8 [( X$ W3 E5 m  Z- E5 h" j4 w6 F
3 F9 {( E* W  s　　 〈/td〉! z, v% d7 {8 y1 A4 d4 w

, O* e, h. p+ T1 {　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 P; r" q4 j# `9 ^
+ f$ ~4 h) R% q+ {- G; r2 W* R6 M, b1 f5 U5 `7 P1 D/ ^
　　 〈/td〉
9 T% R$ N& e8 c) i/ h2 X
; S3 _# H1 ^+ ]　　 〈/tr〉
' _( p$ c) v# B3 e  M/ u* \+ C# j' J7 t9 X6 G
　　〈/table〉

晴天再现

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