|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
5 M+ O( C7 N" x, m8 Y$ ]4 }; ^. \ % U& u5 I- c/ Q
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。, x# [* j8 ]6 P) j
, D9 a! K" o; A! Z: r 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：8 E0 z! m, c( h* z
/ L; O- z8 J9 P& Z( D 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' r5 w% n7 i. {1 e
5 ~, w- a% ]: y! E 〈tr〉
# l5 ?# k, @2 }6 [0 l4 I# u. y0 N: O$ a" @, [6 s
〈td〉
* v& `/ Y4 h3 Z: `# s! O+ i
8 Y" N. A/ p0 x% g/ M% ^; \ 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉3 M6 |! G/ z ~/ u. R
0 V. z5 q/ y! l 〈tr〉
0 Q7 ]1 L1 Q$ V6 W' H2 p. ?. P% _& M, u! a# o
〈td〉7 E0 {5 f$ ?& {& ?3 N
$ t) M7 B: Y& E# k* T! ^ 〈/td〉+ @8 R: P0 z; C8 C) S/ D
" I( T5 I7 P' I( W, P! H+ l* O
〈/tr〉
/ U" J) u2 U# Z7 b) ^) ]
# {8 V$ U0 x- P& K 〈/table〉( z+ L- S3 R; w V
7 n0 X. D; w/ {
〈/td〉# c; `8 N) `4 s; ^5 R- L
2 L* Z3 N' I% O1 ?& n, _! V: A. b4 j
〈/tr〉
" D) [2 e. g+ Y6 |9 ?: x; t# Z1 i. f/ F+ D1 X. _! M7 \
〈/table〉% R$ w7 @4 Y5 J" D
, Z$ z5 I6 ^* J$ _; C" `. I
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。, o. q' m; {: B/ ^, j5 z
& k' d5 I! d5 p" G 源代码如下：
( U/ X* t9 [0 `+ f/ {: M
5 B$ s. w7 A. J 〈table border="0" bgcolor=white〉( p0 M: G, q# O
6 P" }& U" U. C& }* w+ A
〈tr〉
+ I* |" G2 x6 T, f9 V# F
" _8 e X1 r0 ~6 c. x" c& Q 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉2 m1 y) k4 B- d4 O2 }' @6 t X8 y
7 n, J- x' P5 S- x8 _* f& r 〈/td〉
; } O' ]# E1 {. Q6 O4 v" l/ |9 l/ i' _
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
) I. R7 H5 \# {, }3 I
+ P% T4 P1 `; Q 〈/td〉
& I8 G( H' }- Y, h5 j
- y5 }1 F6 j5 B# p 〈/tr〉
7 H, @/ X6 ~4 [+ h/ W: L6 {1 C4 [# n* d/ {
〈tr〉
% ^; U- k$ Z- \. S: e: ]9 |6 w" `4 C0 t% L* X) }; b& C
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& u, G& T1 w t) X- [: n7 t1 h; Q/ V
9 o7 [: E* C1 z6 L) R 〈/td〉
2 U/ y* m# g8 j& Y' d- g0 {0 b1 M' j6 x8 O
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉) Q Z' a$ \" p- y% y. C% m
) P7 [( S# U: s( a) ^8 K6 K- ^+ c& b
〈/td〉& _/ a8 N" ?1 z' g' M+ j8 _
0 `: W$ R* L4 R4 P 〈/tr〉- s% r' E$ y, b4 i" V' z2 c: r
1 E' j( o7 F- q( c0 v3 m5 R$ D 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|