|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。9 B4 {7 x4 m9 y8 b1 }
/ n2 y; T. X p1 x8 N/ z 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
4 q5 \. A0 o' Y" [* D/ l/ X- H$ h/ m P2 A' O" ?
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下： G3 ]3 C+ ?" R$ z# z( N' y; i7 y
k# d d0 F) x% Q
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 Z3 [0 h/ Z7 w& k* ^8 E
2 J1 o: U8 T; r 〈tr〉
/ O0 C* B4 D3 q- ~0 c# |# H$ O4 O
9 d, y& x9 K: ]. D( {! k( l 〈td〉
; O. e& Y' M* a6 m% B0 d% e2 m" g! K7 E; Z( q2 R6 w7 z
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
6 u: m7 l4 H; r3 _: l9 o: q. a9 m! K/ N H1 s
〈tr〉
: G! a Q, e5 J* h/ {' e4 E* U9 W# A3 N3 _% o$ z5 |
〈td〉
2 M- @4 }) c) i, K& \/ P4 q$ d" f5 a ?! ~" F4 F
〈/td〉
9 t# r; l9 x2 x/ w: X2 ?# ~ }* m
% L; v! b* t/ |) e: ]9 k7 ` 〈/tr〉
" e# J$ r% c6 s, q' Y& y& C! G
' n7 A: D L1 @7 o& R2 S' G 〈/table〉+ u A( O6 Z8 C
8 q5 D& }) f$ {1 p9 V9 F
〈/td〉
: K d; M* o- ^, Q. N7 m
6 X0 O: i6 Q$ l" ~" a- D% }. v 〈/tr〉* Z. j" u4 Q0 ?* P
' e" \) n: n3 h! p% s9 y5 f
〈/table〉8 E8 Z1 }% H" f0 G
$ t' Z% t5 _% H1 T 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
' f; }% ?2 G1 e! w1 [" A: V; a
0 q' ]( u" Y; L; G5 U 源代码如下：
4 M9 r7 h! J0 O3 T3 l
2 n# E( _* ^* R2 g 〈table border="0" bgcolor=white〉
0 `+ E& p' C% H) `# a& E' A$ x3 U( l0 U6 o+ j9 J
〈tr〉
8 M7 L# u d9 e# @' F" u3 \* W+ v# N0 [' n+ b, m# A% }
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
8 U% g+ O3 n- g) S5 N0 n5 t& C+ S2 g, b3 `2 l4 f6 L9 H
〈/td〉) K! s1 C0 ?1 g! e6 ^
) r* \, d9 J0 r% v8 X O7 w: u% x 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 J2 M$ l$ y$ R
; ]8 t @& D9 F; u: j 〈/td〉- `* _1 ]1 p. {+ ^- f8 P
: H, v5 ?( w: L/ t+ ]$ g. `; ?4 A* e
〈/tr〉
; S! N, ^+ Z6 n5 T7 o
. |( K$ O9 Z: s: I! V0 e [. Z 〈tr〉
; H. V1 u: [/ V9 y3 ]/ e+ i
$ L+ [1 R* \- G: j' i: r 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
% ^9 ]4 M9 @( p' M- [; b3 p7 y ~6 }3 f2 E
〈/td〉
# ~/ b5 J' W$ @ G
0 _ r8 _/ A+ |+ K+ B8 f+ x& l7 v 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
7 c6 p x4 K0 B' ?) Q' A8 B- C; t$ J3 t. V, Y- I
' R5 Y4 ~# Z& _6 J; |
〈/td〉
* r# r3 j9 y6 I! _) ]) |# W
2 o* v$ I/ Z* X W# l 〈/tr〉
" u9 [( X- W5 c, u% k2 X$ H9 c V4 t) a- Z& D
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|