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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。# ~# ~  S! B7 o* k
　　" o$ i8 ~- [( y4 _
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
2 g# ]5 Z- L' E  d# i. r
3 L' q5 n0 D) Q$ C9 f; I　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
* M3 ^9 u5 z9 L. e% m" m$ u: E& Y8 f3 u
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
4 [  c- L3 R+ _9 ~3 r
  k- M, M% Y' ^9 `; ^& I: U6 K　　 〈tr〉) R% _+ Q& f0 g! ~
" k) G. S# k6 _9 @
　　 〈td〉
2 [1 M/ P* L* X; F
0 R# [3 C! q' W2 ]6 E　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
( I1 B( R4 J0 D; m9 q3 I) `4 @2 A2 W: U: J" v
　　 〈tr〉
, r4 J6 ~' Q9 P5 l! p0 V0 d0 b& p
( Y/ U/ o# A, V! x' J) @$ Q　　 〈td〉( w$ A' ^, e2 n$ U; h; J' \
" k* b8 [, e9 q; t( ]" q
　　 〈/td〉
" H, W1 Y4 J$ ]. V1 G( {" l2 `; I& l/ o: o9 Y2 X& w2 Q6 }
　　 〈/tr〉8 y0 C4 \/ f3 ?+ n

3 H3 h6 U: y  D: \: {, L! Y　　 〈/table〉. C; S5 R8 a9 k  [
  ~* h8 H, K9 A# `4 k6 g
　　 〈/td〉
; Q+ r0 ?3 X, I! g1 A
. L! p# ]9 w& v3 M" k4 H; H　　 〈/tr〉8 Q0 R& U& p! ^! R
. v* L  o$ D7 l+ _1 e; J
　　 〈/table〉7 `1 B1 l- [  O) S# M) s

4 K! f2 m! q, W, }! H8 |: s　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。. [$ L' O7 w# ]! ^& A5 b7 u& T4 j
# }4 ^4 ?9 G/ C: Z) ^
　　源代码如下：
) ^8 E, q5 g4 |% ^. m" H+ `, }- i: Q* Q' Q) m) E0 e1 }" B
　　〈table border="0" bgcolor=white〉
& r. s2 m5 R# K8 F4 l& F1 J$ O
. i6 A# x4 K& y1 i　　 〈tr〉! ]! l. }, S9 F2 u: {, d

' M! ^9 B3 w5 _9 |　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
( i/ ?4 ~7 j- q# |
5 C6 E9 q- v6 H& I1 r% h　　 〈/td〉
- ?6 `) U: N5 \
9 i! ]6 |/ D6 c6 w$ f　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉$ K/ M/ W1 f7 I: l+ ]

, X, {. N' J* Y: D; ^7 ?2 e　　 〈/td〉
1 C$ B& `  V) U) t5 f5 ]. Q- N5 i
9 Y" R8 N/ W& K/ C6 K! o　　 〈/tr〉! j1 Y; Y1 O9 ~; w
$ g( ~6 P+ D; l9 ]- X! g! Z
　　 〈tr〉
  ~& e9 a( f# a- _" N' V: j
4 T- }/ j. `; e5 `/ T6 R　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉7 i: Z* L# w. v5 Q2 ^/ H6 A1 Y9 w
; o8 |4 Y: P5 W; {: Q/ u
　　 〈/td〉2 ~' i! u$ j* z! X* S" b3 S
8 |' N2 c# {6 {+ v
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
( Z5 M" q3 ~" s3 ~" ~% F/ R' V( h6 C
2 D' T- ?8 f% T
　　 〈/td〉
3 T9 E1 u' P/ V% u8 K2 k
" @0 s: n. p1 T0 O" A' A) _　　 〈/tr〉1 k& G" E5 J1 d  Z
! M, E- m7 h, M
　　〈/table〉

晴天再现

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