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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
) a& j- [9 h5 L0 E/ ?　　  q. L# q0 j/ o, X2 h- n
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
9 M8 f1 }" z! a2 p
; F2 x% t3 a; ?; w( {! K$ D: U& N　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：' o8 q4 o% e6 S+ ^8 K
/ Y# e# ^$ e5 @, N  f* r8 A
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
) ?0 t% Q  H6 D( z/ n9 V, q
3 s# \- q6 F5 O8 E- V7 `　　 〈tr〉
5 z( n6 ^, @' u
; S1 D7 n/ C* O) i5 j2 o- D　　 〈td〉
! ^3 Z7 E6 U$ |5 I5 G- o3 y( ]
, Y$ U" b8 B1 m& V  V; m7 H　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& G+ m& }7 `. d6 O3 L
3 |3 ^% L( G4 c2 Q1 h0 b2 }　　 〈tr〉9 ?! g% E. o3 N/ f5 B
; E6 c3 g* Q$ Q
　　 〈td〉  R# [6 B1 s: `- X, y# ^
; M2 I5 i. E4 ~" O1 }
　　 〈/td〉# C/ n6 `! d9 I! c, g
" g" G% j& |! U  M" f
　　 〈/tr〉
1 D! [) M4 @8 o9 j/ d; E# O6 A# \' ]8 X, x% ?
　　 〈/table〉
0 F( O; {5 t% u8 S! f
9 T0 O3 B4 X& w3 K( a" F& w: v　　 〈/td〉# ^" }  c8 m0 f# Q( n  Y  l! H

! G/ `" v6 W" n& ]! Z- x$ Z　　 〈/tr〉8 r- ?7 ~" D! c& [5 @

/ V' ?* Y5 Y# `$ h　　 〈/table〉/ @# n$ j) c* v% @% U! v9 `

2 ^9 t6 q9 T; z/ F( I　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  [/ K: v$ s5 k
9 x+ g4 i5 u6 O6 S: k' \, Q
　　源代码如下：$ r0 E$ x; `" I+ ^' B  v' E1 J/ {
* R  d/ j; K2 ?$ i$ r5 ]) v' V" }8 {
　　〈table border="0" bgcolor=white〉. k# n5 g$ B: ?% {) s
4 A) Y! ?) J( @6 `- e. a, a
　　 〈tr〉
1 \2 U& p9 x1 k, v
2 D4 y2 D( H. H2 B5 t　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
  t) U* Y& {6 O/ I! y/ W: g1 ~3 m* `$ }: r! Q2 L
　　 〈/td〉
9 G; U- p9 ]3 h* |7 S7 ^% r1 r/ f, ~8 X5 a! ~8 \
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉3 d  O0 N( I, }/ {" ]
4 S4 P. L( @3 f
　　 〈/td〉( ^: p& g/ n3 q5 p' }
8 E6 L3 `  h# W9 D! B; g
　　 〈/tr〉$ l& {* s; ?4 r9 A# m0 h( W
; M1 Z+ B& X3 s, E5 W5 e0 f9 A: P. C
　　 〈tr〉
: a9 q/ n+ C5 V8 m; H6 Z* Z$ L3 @/ _( Y9 V7 f  @
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& i1 g8 \) R. O7 t+ A; K/ v) ~5 R3 ?4 _+ \
　　 〈/td〉6 L1 v' x1 U& `+ `3 O1 j

/ V+ ~3 B) G7 r; Z! b( t* G　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉6 L+ p. ~6 N3 J- Z; E5 _7 @

1 L. `% |5 Q  h0 ^/ D, R* C( b. ?
　　 〈/td〉
' c+ b' J: X8 ?6 I3 W$ D) N2 ]# }/ V& t; `: y5 g- G
　　 〈/tr〉
- ?, T+ I  v* {( s2 O3 A0 o& K; I# C+ f% K$ r
　　〈/table〉

晴天再现

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