|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。. \- W4 n- d: o- m9 N- S; y0 F+ [
' S- b' L% W6 }+ `$ Y 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。8 p+ R7 Q7 R" q4 e* d& \
2 P! L, {* s8 ]0 J% b# ?& } 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
% k6 i- v2 s' a0 ]2 n& @; y8 y# L: W- B0 M1 U& V, u; e
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
+ X( I7 J$ {6 C3 p( B( M/ _8 ^9 H x F* F
〈tr〉9 T+ t% s& F* h. X0 S
4 V- v4 U$ R) G/ J( \2 I& G# J" @
〈td〉
. \- X: z8 X" U+ M$ z* o7 ^* H" L% D2 y% L2 _$ Y) ?
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
l) o% p: n- G% [4 O. m% r+ `+ Z6 d, ~0 a7 y( q
〈tr〉
# M2 L# \" o8 W) @) ?; E( S6 E9 a9 ?/ J7 C
〈td〉: m* q; |' m" I ^
- j8 Q" ^9 f6 U) W; w0 w- j( u8 Y
〈/td〉
1 d6 k/ p) l9 S* J9 _- |# H. m3 O% G" E9 p; Q) T
〈/tr〉
K2 n6 [8 U0 V1 |& P' c, G+ u# j& i) F
〈/table〉
* g! D! w4 K# a) P
X) W. D, p- j' H 〈/td〉
9 S; G& @" R5 Y' F* Q2 ? u8 X
6 b* j! ~) a7 O 〈/tr〉
4 B" U( T$ O0 j6 v9 ~3 a8 n" C& N8 R- d0 }
〈/table〉
$ W2 Q$ ?- H' ?9 B
( g6 R0 t, u1 |' n 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。2 s& Z6 Y: i- Y# y* y1 R0 q9 p
5 T0 E. t- H; f( C6 r7 B* L 源代码如下：/ J8 P- F+ f0 p! N- {
4 k4 p5 |8 a& V# A& d4 P( ? 〈table border="0" bgcolor=white〉+ I+ v" d7 l0 H
+ ?# X! D5 q' H1 C 〈tr〉8 i. f7 n2 x6 D T
/ Y) r L) S4 E! Y6 V: m2 ]
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉+ \# w( n, S. B! X7 c0 n5 }
- Z7 X, C; F. G 〈/td〉
' U' |4 |" c; K) l1 D4 l- j% E% v
7 V8 Z, J/ G( N) M$ x/ j9 ` 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉: T( I' W. {% @: q8 I
0 {8 }; H; ~; j7 \4 E& ]9 U" R 〈/td〉/ D* _: k0 v0 {# O& q6 ^' g. L% Y
0 \# b a! `+ B% O& [1 O {3 C 〈/tr〉
2 I7 Y, ?( r# H& p" W( i: Z& J; f, |% Z8 ?9 I0 e' ]; z
〈tr〉9 a Y+ j2 v1 U0 y
2 `* k: C4 H9 m2 n9 N; k0 {4 o 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉+ B1 B) W" [ L2 Z
( v; v2 v3 w# B/ V7 P 〈/td〉
" f$ W! }9 m# `. ^0 h1 t+ [8 H2 T; v) V
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
6 I- w s. X$ S8 M7 [7 y" k# v, W
" r k6 _- E( q8 h' \6 \$ d7 l/ Q9 O' d
〈/td〉% u5 {7 y t( I' H
/ e. \( ]# ^; ^# b" C. p5 L 〈/tr〉
' \" V* q6 P& }1 V( B0 C" X8 I5 f! n$ q$ v7 z3 H5 Y
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|