|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
. b' X: v7 @4 Q5 C
0 x! P5 h, u6 d7 V) x7 U, P 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
+ z! n* u4 k0 n: X3 k( Z; {3 p+ h" ~& U# \1 J3 U; z$ ]* H4 z
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
5 s- o: X( ]/ u" M4 k
B9 ^2 x" h( F7 [ 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' \2 i9 M- S# N0 ^
7 E7 n& r1 x3 R7 e5 F+ l0 s 〈tr〉7 R; N. G) L$ [* o! [
$ {$ I0 e7 ^4 l/ c2 G# A- {
〈td〉3 t( S. _- ~. [" i
5 P3 X! }# ?4 @) l3 c3 k" R
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉" C2 [$ \: |3 f% ^3 r6 |
1 S: m# O) B# U9 y 〈tr〉0 Z, w3 \" N5 d* p
% Q5 o z0 |) p+ Z8 I& F" [
〈td〉
5 E; h( u/ ~1 i% _ _ U4 [7 w5 Q% |/ j( u' O
〈/td〉5 e6 s+ J4 ?' j+ B @' \
- V0 o- w5 F- i5 v* K 〈/tr〉
# j @. t3 l4 t; o5 ?4 x- X9 b! `6 a7 Q# H$ J' F5 ]: s
〈/table〉
; ?. R! V0 O* ?6 a: Z9 b- K! U: ~1 N7 Z7 B# Z+ E1 Q6 L. T
〈/td〉, n7 A2 G$ C6 m8 O2 j7 C
6 @/ m: M& Z2 w% @3 I5 I& q2 l
〈/tr〉
& J- G% w' }+ W) ~6 P
8 }- }% y8 C- @' a. f 〈/table〉4 @2 k4 I0 K ?% S. A
5 m: d. | `7 _5 p F
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
4 h1 O) ]; X$ f+ u7 ]; E6 R3 W
0 c$ F, [( ^6 m- |) Q* F7 U) A 源代码如下：# |+ G4 ^- c7 G" T6 G
( _9 L8 s0 R! ?/ y/ t 〈table border="0" bgcolor=white〉+ P/ m" L0 J* Y# t1 d* c, @7 T3 p
0 C; `1 E3 \5 j3 }
〈tr〉
4 B7 Y9 m2 ?# p6 R- K1 N1 u7 C u2 L
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
8 b" ], m& W) G7 J7 n
* ^- y' d* s+ w* J+ G2 s" K! r 〈/td〉5 x; o) h y0 ~" ]4 I- l
) N# X" @* l3 O, C2 u 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
" Y) {3 p7 S4 A) P9 ]. t! h
1 e+ w% d6 Q; ^, B. v" h% x9 W/ h 〈/td〉5 X% N: E. [; }, P
8 L) l) i9 O7 M ?! f; D. n
〈/tr〉4 J9 Q+ |6 N1 e4 K1 e
, Q5 U& n* y6 K; K 〈tr〉% ^! ~/ L+ F9 D0 \2 k# X& h1 P# _
# Q p3 \$ r$ L% L' S 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉) Y, q0 G8 X0 z8 E7 S) s' H- x
% [$ x5 x% T( f% c4 k7 H2 _ 〈/td〉
# w# x6 H: V4 g: E$ [5 N- f# H" y1 G0 }9 r
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. \# v8 r3 n8 F4 b4 }. ?
/ A7 |* j, n$ [0 N! h
1 b7 L7 s8 I1 H% |; r7 n 〈/td〉
/ t0 ]0 x) ^: [0 I- \. `9 \1 o7 C6 H
〈/tr〉
# v$ q6 v T. ~' y+ V% F" M+ b" z4 _
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|