|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。3 L" q z2 g3 b/ F
5 Z1 p4 B( [; R& ~8 n% c
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
I: _2 J1 o' n0 ]# M: \5 R8 @4 F x8 @( v! J
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：, s+ l0 n7 b3 x/ h' |( e3 H
/ v# W9 @ i* Z" k6 S$ M( l
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& c# x, I2 T7 B% W% B8 D
$ W. x, J! J6 g: D) R- R* [# V 〈tr〉
1 S1 P1 \1 p) j8 l7 M# m/ e
, l4 o1 l* n1 @2 o2 ?; D 〈td〉/ Y6 ^4 h Q, l
9 Q, b. A+ z5 O# ?* J
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉8 a. Q- W" z7 r4 ?/ I3 z. q
+ w) M S$ P1 t H( G
〈tr〉
' F2 C9 i! O* I, @' K6 K( d
9 H0 m, m3 D% G l* m4 r1 g- | 〈td〉
7 d5 @+ B% \9 j, i+ M) @1 [. f/ i/ @/ u. r
〈/td〉
) M6 J8 ]; g/ A! {+ t, W2 B
* p7 f4 A. |2 W 〈/tr〉
3 F4 u% K2 u, Q6 T' Z3 s0 X$ k. y, i' \5 I) |# Z
〈/table〉6 C1 A9 C: k8 W! w! U
' P8 D0 a1 [% i5 M |. s( ~
〈/td〉
1 C: V" f: H% ~. Z: p0 W
8 t9 B. d/ t# @1 F* [ 〈/tr〉
2 x1 L# b: y0 K# _% o; v( J$ V6 w
8 A \6 {0 P0 V: a+ @+ M) d 〈/table〉
O3 C% c4 P0 X. T6 w1 c
Q& U N& N3 Q$ @" w! G 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
5 z+ j4 l' I8 s7 D R$ l3 e9 a# g) l
源代码如下：2 w+ o- ], L+ j% `1 T
7 T# F3 l9 R1 |* M 〈table border="0" bgcolor=white〉. _8 i1 R1 ~1 B' y( H1 y1 E
2 V& L* b) v$ ?% s t
〈tr〉
# r1 g9 @) [: V$ C& w1 n3 C5 D4 E( N \. E8 w; S& _# T
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
; H) [5 e2 Z/ g
5 J/ O" I5 F. J( H1 _! m 〈/td〉7 o9 V( ^3 ^' [
# ]0 N! ?' U8 d+ a6 g; L
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉) c% c& T; {$ R
/ B) h9 r& A9 c
〈/td〉! d2 E1 b7 l8 ^* l9 g9 {4 A
8 P! F; V/ H' E 〈/tr〉- h* c* w) V8 U& Q3 w' X7 V0 h
/ ?7 G# l. }& A: L, i
〈tr〉# G% z" X+ D+ |5 f) E
5 _# B* q& l0 l$ M, \/ F+ O
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉 N1 p! O2 B, s. ]6 G( q/ ]
! }( J r9 i g' K
〈/td〉
, l. ~: p* A! p2 K! v& z* b9 C( Y+ m% R$ b* D; P) R0 Z/ Z. n2 |8 I4 a
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( K* P. e* x& a7 I1 h( i
7 v8 R7 z0 p3 v& u2 D0 s3 o8 ^8 t% u( k3 i( y
〈/td〉. Z! a7 E: E. C' x8 k, ^% H. U
! Q- h) t7 p0 ]& s: n; V) W3 ^
〈/tr〉
" f& o( P, B- M* h+ ?3 W3 X; Z2 D
" F# w& M, A" G3 m4 l% N. e& f 〈/table〉 |
|
发表于 2008-1-19 22:20
| 