|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。9 f% ]. O3 i! T& T* r
" C) m& U. G" v' X4 w 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
9 y6 s" j" B; Y1 F; r9 v& Y% m1 y3 D z9 W
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
) B- H0 B. l# Q; @" Y9 w* d( l3 i; R" j( q( ]! A
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
3 a {8 f2 T* P3 G& E, g+ G6 @% A# t& ], L# `! k: q D: X* X
〈tr〉
3 Q+ m" ?! L# P3 T2 ^ U/ i& y5 N0 a* ]
〈td〉' E/ f: ]4 ^; e! j/ |4 C
+ L- u# f' G! v( M' u& b) U; @% A
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
& Q+ Y4 m) e# l7 Q. ~7 V
8 i* J: ]6 ]7 j# y+ |( q2 w2 Z 〈tr〉9 g h" R& i( K0 z# s3 h4 A+ u/ x
; s: f( s! v( q: n% ^' J6 n
〈td〉
& T; P6 |/ b1 G a" i: M" h% ?3 L2 Y: B6 W& {& K
〈/td〉$ y' ~* y2 F& U: w
8 B* i) G5 v9 Z$ z+ L1 j+ D1 Y2 g
〈/tr〉7 O- r1 i3 o1 b0 C
, k; o; ?& {$ x( }. G* b, X
〈/table〉
$ B# e4 s4 P6 Q% l# J2 L( n G1 n5 K- f
〈/td〉* B2 [7 O$ ]$ u2 d" F
- v* S- L7 D- u" r5 Y6 F 〈/tr〉
/ U& \' I& t( e3 x5 b) P2 f" t! B
〈/table〉
/ D: ]* i/ z4 D4 K; z5 }' B7 N& A; C$ _2 `( i D
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
* a6 L0 x+ }7 N. Y& f% O5 I! b5 M7 O8 g: Z3 T, z. B# ]8 y
源代码如下：
0 M) ]" |( S, l9 n# }( I z7 O" }4 j
〈table border="0" bgcolor=white〉/ x2 n( q6 p, u2 O: X, O4 k
7 A0 Q; P) [7 u- J% ?
〈tr〉
9 h6 R. b& O) H$ t7 o. [( z6 p9 m; Z) y( Y0 r1 a
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
9 ^0 {9 E. O- ?3 |9 ?, ~: ~, B
4 Z3 p) `" u% y( P0 _ 〈/td〉" s! e, V0 j! s {$ W' |2 i& Q! X
5 ~, I1 A1 ]+ A6 x 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉4 A2 N& ^0 D# @$ h
6 |( X1 q* E$ x5 ~; b+ {7 L 〈/td〉
, m: y% J$ y, v5 w! q7 o# `& c! P" }$ m) x: e
〈/tr〉
4 e! G" U5 t# A9 R/ N* i
( v' N* K4 }" ^8 d; m6 y! c* K+ { 〈tr〉
! w" q& k, y5 a0 ]& E
: r5 v! c9 i2 h; [& h 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
1 u0 S5 J3 |7 t6 X+ f. M6 A! [1 w5 }; d% v) A; f; Y3 L% Z
〈/td〉
7 j6 d7 o0 K, v( T
- E- F! L; J7 d& {; n l/ s7 o 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
4 I% R: Y" Q/ }& K. K8 A# W1 P& G3 S9 L+ ]+ K& f7 x2 b7 X
4 ~* ^5 [% E2 p p& \ ` 〈/td〉
3 m+ m$ D9 E1 [% [, F; n6 S/ A: q9 n' K$ n7 K
〈/tr〉. P' W1 K* K8 f0 J0 t
7 t6 U, S/ {$ [( r. [
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|