|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
, N8 K4 B* u9 A, Y& T# p
7 u3 h0 r; b8 Y: e 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。- C: m4 `- V& z- w6 @8 ?
+ a/ s& K% ?1 J0 l9 ~8 m 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：! `8 @" ]3 y/ M( g
8 P5 @1 @* b% I5 a9 I$ E/ `
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉, Q; S/ ^ e0 i( @
% P$ n7 x2 s0 O5 H0 Z
〈tr〉
& J& {1 r0 i/ U8 s, \$ ]; A! @$ E, A+ |
〈td〉
S$ Q G6 c. k3 O' @5 s1 C, j/ {3 i# N8 p5 Z
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
5 w T0 v; ]& l9 U# w: N) s. d5 A
0 d2 Z L0 [( i: ^ 〈tr〉
* \' X5 v' d$ F4 U1 F8 A; K7 l" A/ F# ?! x
〈td〉# E a$ _. o! W7 j: L* _9 [& \
3 J3 q5 c, [9 {# f
〈/td〉+ Y5 }+ L9 B; p' _1 G
, f7 R9 d/ x+ A2 t1 x 〈/tr〉8 B& }7 ]1 l6 }" V3 _
S4 N; i! f! P& w! i$ Z v1 Y) |& { 〈/table〉! C. _& _7 L9 w2 \- O) T6 v9 t
1 ?' Q/ \0 R g0 @$ {4 B 〈/td〉
; p( z& G6 C; @% _ x- E2 {: b0 G2 u p9 f3 \
〈/tr〉4 {, U0 l& Y4 C& L- x) s6 {1 l! o
$ i+ @0 f0 { Z8 Q: P; L
〈/table〉 L* q4 O" t/ K! |7 q$ e
/ a# m5 A0 y' E# K+ N 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( m" C2 V/ L2 M# K' ]- P; \& i# [! i8 m1 l
源代码如下：3 r! ?2 G0 w$ j8 ?6 M* I! n
2 y6 ~1 v( Q9 u y9 l 〈table border="0" bgcolor=white〉+ z. K0 c2 z' B
' C4 @' z! W2 V# q3 i- Z; \0 g 〈tr〉
6 V) T) k' {) |2 R" D' q) `; B2 V) y& n+ P' b
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
. y$ o5 E- b, G; T# t! p
d7 [( }+ E: Y: r- B) s 〈/td〉
& _! C7 N) j' n: m7 D1 h2 |$ a7 D5 d( x. j& Y
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉! N1 b1 U6 _/ [! I4 c' v
5 q* n/ r" C$ |; w/ F
〈/td〉
" G0 l b+ T9 ?, V3 A
, t2 W3 w, H M/ s: { 〈/tr〉
$ U: ~2 a1 g1 }0 O
& q2 S4 M+ z$ ^: Q/ {2 H( ] 〈tr〉' k4 j$ }9 g; p& V7 K7 p
4 o+ a9 a5 }- `% S6 B# n! s* j 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 A* D) M- Q9 j% J2 o6 _. R& J0 W" i. \" f- i5 X. g
〈/td〉' d3 _7 o8 v- ]5 a- j7 w
* d- ^% m5 `' Y' x3 n$ Y, |
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉% K0 I- d% `2 O1 {) A3 P$ D
# `) ~3 F( D7 v6 }1 S& A$ u- o
* k0 g9 Z8 d4 I! Z5 D6 b. i 〈/td〉
3 V& ^3 L0 F- e& n0 \: b4 d7 }; E5 u \+ ]& G" i$ D& N) I0 B
〈/tr〉
9 p2 R& t( v5 H
0 x( G: `9 g* |* ^! F; [; { 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|