|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 z( U Z2 h1 V' Y d( L 5 r& [. n& Z d4 |/ @
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 j" i0 U( A- G$ {
e% Y' i6 Y$ _3 e! I6 W2 F
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
% ?$ ^/ ]4 v$ W, H) E0 M% }0 ~- d1 I/ ~( ]
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉3 m7 k& O# ^4 k/ t
: f9 b. m! _* b
〈tr〉
: V! R2 L4 J9 t! n% F6 A; F* B( t+ U1 O, x" l
〈td〉
2 I, i9 X" ? G0 O: ]! Y' a* r( P, t, Y1 s4 b6 n9 Q1 l8 z% X
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
1 @8 R- w0 r0 x; I8 [& `+ _. A4 u, E- r* q
〈tr〉) P' q) f* n# B( [ [. b
( q) z# K/ _$ y0 [# H* k
〈td〉
9 {9 ?" K! ~6 ?1 \1 G: i) n- A: Q7 U& W. Y
〈/td〉
7 m; i5 Q1 \4 C. F% S! b5 q
' e, k5 S" J4 O1 n: ?) o. p& i 〈/tr〉# H& a5 K6 X+ L2 @
+ l& B# K( |( x5 O& m 〈/table〉
; k; ?; r7 W3 n+ s" V( ^& ^( w# ~& F. A" T
〈/td〉
, L0 |+ A8 m( J& `8 }
( ?' {7 ^" F# w. O9 i, K 〈/tr〉( y- F" X# U/ z9 t' f J/ o
5 B- M4 F- E/ u$ k' e. z/ [
〈/table〉: Z/ }; ~3 C) ?( H! x* e
4 u1 E& s" K0 Y" d5 A 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
3 p+ ^( G% ~6 {4 d! `+ z2 B* R: j
" {" }$ C( J9 j0 F 源代码如下：
- b) |3 b( E5 ~ y5 L: d1 H% _2 M$ Y1 Y A! ~2 h" }; f
〈table border="0" bgcolor=white〉+ S- Z, ~& \+ l8 s; I4 I( g0 E
, v9 M$ ^$ h1 O, j
〈tr〉
+ x0 ?9 x- a, X9 ^* `' b: s* G" m, g* P. S% _7 z
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
0 p. t/ b. l3 w$ L- T9 ]; y: y
8 c( R$ B" c* h6 ?2 }* r/ c 〈/td〉
- J! c: G; F- T' v. k- k1 T5 Q
6 \0 z1 ]8 R8 T. k& N/ L0 D 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
* U$ ]2 c* [" Q8 a7 e c
" Q8 X" ~2 K5 e& d7 ` 〈/td〉0 M6 k4 k+ P S* B! ]* [
1 c% E/ e+ ?* S' o P 〈/tr〉
5 i5 X2 v5 k2 V" F6 P/ d3 D$ z
/ n9 D7 X* P0 |) U 〈tr〉4 X1 S1 T2 |+ z, d: S
/ N$ s! Z+ @1 p! c- V3 W8 n+ N* K 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
( K% f* }+ R! z+ r+ Q7 x
1 y" ^% U, U2 M5 I3 D' H 〈/td〉
( ]" J$ b6 Z$ _3 o+ F; d/ `$ I
* Z/ w. z4 E' _* E$ v/ ? O 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉; w( W2 q9 J7 |. _) m z8 p" e
: z" Y" y% }4 Q( R8 h5 j( e4 [8 u
& m2 _5 F- w4 c3 ~# m8 a 〈/td〉& ~- }/ b* f( ]6 F' _3 C
$ ?& B2 O7 ^. M4 K 〈/tr〉( l* c" X' a- |5 d f
, \6 E3 W& x/ Q 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|