|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
3 v1 W3 o- A% z6 Y# R4 L
5 e- z o& b) K4 O 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 h( H1 S) f) B
! d6 {% s' V9 d5 a# d1 { 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 R2 l1 F$ Z7 e/ C* M
' h5 W6 _: O' w2 D; p, k4 n2 Q 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' r' `. U: C$ k9 H4 h/ }8 V5 ?
0 V8 p' {$ ~; P( s" Y 〈tr〉" C8 j6 Y7 y5 ^9 t2 W
; M: |; G- d) x! p9 f1 \
〈td〉
. b- z- N @5 ~- h' w h- i
2 m9 A# x( P2 d f 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉; m1 ?7 A6 W" B6 Q" ^9 g; h% \
* b# B& ~. M: a1 q M
〈tr〉, Q) i! B" F* C% C i+ J: k/ j: a
: e, m( e& _: r9 o6 ]; A' d5 u; {9 @; X
〈td〉) Y- Z; z& d* v; v+ @/ k( ]# H
7 Y0 S2 k* ?; } C( w: O2 j) ]2 v 〈/td〉
6 p( ?) t4 Q% T2 ]+ d/ |
4 ~: U% m a6 Y5 a1 k* U 〈/tr〉
) R- w8 H4 B. T5 Z
' ?, J! S; `- f) Q# k: @ 〈/table〉
( A( c# K" ]" H0 k! W! v. B6 }8 L0 G9 V1 O! G; R; I/ B
〈/td〉3 y+ e3 D7 x7 C+ ~$ e( Y
1 z& r7 o4 j8 [0 Q
〈/tr〉
# ?0 o$ L( D3 D% ]; o$ z& Q* U) U: r. |0 `
〈/table〉
4 }* t, U/ m3 Q* R% X, G5 i
. o* b% {# j8 s/ U/ P 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。9 T3 {7 [# G9 S- l s
2 x: R5 ?* b/ Y/ p0 b: C! r 源代码如下：1 q$ e g8 c* X) F' V: h0 g8 W
( E# J2 k" _, |3 ] 〈table border="0" bgcolor=white〉: n5 y$ S& p' q/ E1 a
: \" r. A' l: k% v% F6 G
〈tr〉
: A4 n( U" L6 E% a, w& R, p/ Z& Q; V$ _
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
+ ~( ?( J" v/ ^7 A% W" l" K4 Q0 t, }3 |5 g; \6 \8 O
〈/td〉
; y4 k% z( Y, {1 W* Y' q. u
: G) t; I3 o y5 d r 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉) B1 ^, C% v9 P$ k1 T& M8 ?
+ }! Y) I: X9 `" @1 q! ?
〈/td〉1 ^$ Y1 Y' N; }) u/ m- ]# D% h
% T( a! y, D3 b* X/ ~+ o
〈/tr〉& u# a* {9 e A# |. q; B5 |
/ r# z3 p% }/ T" a- L
〈tr〉( H0 K. b2 M6 ~( d" v/ f/ ?- @
: n# D) s: N! R3 k9 Y5 |& E4 W
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
. ]4 ~9 ]8 s& [1 c* K$ |* I
: ^, I- ~; A( Y 〈/td〉
0 d7 ? ]3 T* N3 n) T- w2 `
3 R! J& E5 C ?1 c" ~: i+ F 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉: u3 E" W; q5 |1 h* _ I
6 d0 w3 @9 C& G9 g
. c/ P: C8 U/ u 〈/td〉
! r2 l2 [3 J; y. a" R3 @- F% V& A$ f7 j
! ]" a+ L3 ~, a# s: X 〈/tr〉
8 u5 @$ r+ w( s! U) T+ U+ L/ o6 P, q ]
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|