|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
$ o$ R% @5 m" T' T2 p 9 G- U* U3 ~: A! e8 ]& z
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
. Z+ Q% X) ?4 R5 k( ]% _& v
0 X* I* V! n4 o& w; o7 | 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：. d. ?3 N& _2 ]. Z2 Q6 }" a/ F# ^. g
3 N7 d& A; x4 \3 ]6 p2 e; ` 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 f1 n7 d# s- Q# r
" f# J8 Q! [1 U" G 〈tr〉
* h$ `9 r m4 F E8 U' x) V+ S; V2 o, u8 D- y* L
〈td〉
( r% {5 e ]/ i# C3 T" x" d
# F% d6 A' z* @" }7 h 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉5 v0 Q- N# Y; h& X
3 R# ]# h) v* S6 c: g" [% \
〈tr〉) @: b' _& d; H" t6 D
' ]* n) y( G8 V5 X' U 〈td〉
2 ~2 G' U* `8 j5 j3 j9 ?1 r* Q. w6 U: \; q8 v
〈/td〉
$ [' s. H! w& m t) r8 ?. E2 G" h; q. w
〈/tr〉
7 @* n' x/ J l; [0 P
% ]' z1 m; ]( `' { 〈/table〉
5 x+ b" p* D% m+ [" x8 k$ m- Y
+ k; o( ~. l) d, U 〈/td〉% C+ N A! r o1 l3 |2 W0 s: T
6 W/ e& {8 Q4 g u0 R; Q; Z2 s" ^
〈/tr〉
2 o( ~# `2 Z! ~6 P& P, {+ b& V5 m) W) b4 k1 ]2 k. i. g" F
〈/table〉
& m3 Q: u0 A8 M8 I; G
# z& @ `, }6 j2 v h) z7 i 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。' u4 r$ r6 _( L% s# q3 y
a$ z q1 F$ p: X' V% M3 ?
源代码如下：
. r2 z% e6 x) L& |, q5 Y. e
4 c& q6 S4 A: m; n! G, U 〈table border="0" bgcolor=white〉
* j( U$ V5 P% z. o, A
# `/ P; }* n! i% \5 B$ b+ Y 〈tr〉
4 R+ _5 I% Z' J* \5 |* F3 |$ g' ~, ~! z4 y! @" J
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉: P( m, I( B5 T8 O. A
' ?2 i* x( m! L C3 _9 R 〈/td〉
( [9 o" _$ A6 G6 f0 j% w/ }$ Y1 N- G( N. m( _
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
& y3 a" v8 X: k4 k& o9 O! N7 V& E, z, ?+ M1 ~$ ^
〈/td〉
& \: C: D" U% s
5 o- x& V$ \* N3 P7 F* k 〈/tr〉
$ B& J1 k$ t- o- n& X J6 }0 ~) |3 r* F) J. T4 t9 x/ f+ M2 l
〈tr〉. O, j b$ k: O. w3 Y' [
) y5 g1 x: Z1 w. J9 d5 | 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉. p7 K; z- h& ~0 _" B3 c
3 H- K* F; ] d: z/ Z8 ]* N
〈/td〉7 g" s3 o) z4 }% ~7 V- `0 }: p
' S+ t6 F) b$ [, p" q" g$ x 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉( O: L# v& \ v$ _4 o! t. e
* o! d4 h2 N% ?! i9 S) z
0 d m8 S: x7 r# b7 I, h6 Q 〈/td〉# H! s' R, V# c7 ~; `
: K; S/ {0 m: F( k4 l 〈/tr〉
2 p( _- ?# G- A5 T: x6 [$ E8 s1 ], a: g: b5 e8 j8 D
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|