|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。5 d: H% h% N) U% \; x
1 V4 G2 X. r, u/ Z& | 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。6 o! ~7 W( B( a, B8 k+ t) c) C3 O
$ Q; F& i( {. x) [6 u" h* D 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
4 s. f8 O6 Q* x+ \ b# C1 d. k
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉$ u5 ~) v) i* m( w
" f4 V) K: C$ ^0 B- C ^ 〈tr〉) e2 J6 e$ l. P. H
$ l+ g4 c- S8 r 〈td〉
7 G: c4 N O# c I$ o' f
1 [! V( s; V; H A& u, E, v 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉8 ]* R( A* @# y* d
3 j' _! E- a% w) e5 t8 S! U/ Q
〈tr〉
) t& ?- F _! k" I# H; \9 q% V$ ? `/ l P; ^4 W
〈td〉
$ ~ t0 p2 ]5 z4 C7 `1 Q; u
1 M0 s" E! w" a7 M; Y8 } 〈/td〉% y' u& z G5 H: e& H
* ]6 p9 C& {* x) i$ Y
〈/tr〉
9 ?2 N& f, T. I- M
! @4 L7 d4 H9 n( {: G& f) ?2 ` 〈/table〉# q- _: b. L( e0 H0 G
" W# @$ i- N3 D# W Y, ?1 h 〈/td〉
& h6 A1 m8 ]: Q& f' o. P- M$ z6 Q2 s! v1 E+ f) x3 Y# r
〈/tr〉
% n0 _7 S3 }# C! Y
7 f6 H7 W2 e8 b c 〈/table〉4 F8 k. m% E( {; ~7 B
: `0 f! e0 N/ X6 ]2 P 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。; r2 H g5 V1 n1 S7 n
0 I: S, _* T. Q 源代码如下：+ A' j B# \# f8 { F
- s; x1 k! v& H3 ~
〈table border="0" bgcolor=white〉
" X7 d ~8 X- }7 F" j1 U# o6 Y: }; f# P" |- j
〈tr〉
4 ~3 @/ j4 j/ O$ m) ~& n
4 y( Q; t: t0 Q! j: _# L 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
( ~& k. H b1 A
/ `8 |4 H8 A8 K3 j. m 〈/td〉
: n; }) O. @% B5 v& s% ?) N1 j$ E9 z' t# j* Q
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉* R! D4 ^' S: N3 ?/ U7 d6 I8 K
* Z2 U9 U( J3 O 〈/td〉. C7 h! `0 O9 s* J
8 W' p# y7 }9 Z1 d- t$ X
〈/tr〉
/ D7 q' B, A* h% n, ?( f* L. W2 ?; g% d* q
〈tr〉( x! ?* G% ]0 R$ R
& l) d; s- |4 R# n: k: ^
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
8 D3 ]4 S1 X5 E9 |9 _
/ n: G1 [% x' x. ~- O# \1 Q 〈/td〉$ z5 q; A% A2 Z& R* Q+ a a
, u' J2 @5 b$ \3 A2 { 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. h9 X/ h+ H/ u$ d, O
2 B; K* F; d0 m9 v! `- Q
, G9 @9 J+ j+ a2 o4 V 〈/td〉% |+ K+ t; n6 e2 d7 p
. A% D: I1 P% G' U7 @6 o! b
〈/tr〉, i" J9 }2 O8 i: @2 L$ @5 R
2 ]; V+ w. U: y' c2 O
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|