|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。& {5 n! v+ i6 f4 S. [9 [
6 F" |1 o: C! E0 q. w) o
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
' s [# e2 i! E$ H2 }4 u2 T1 J7 _6 H5 g/ W5 S6 r; J
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
) b- n8 `7 E4 @" `. B& g9 F
& q+ h7 W+ i! }* T8 ^, Z) q$ `3 V 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉; `3 A- j6 J2 P8 c4 E
* L# E, o- s' y& [ 〈tr〉) d H& q9 r* ~
) T7 L8 I1 Z- }! q, I6 n2 O7 B& F 〈td〉' e2 X" I. M- F) |
. c- B( W" ]) u8 O# k. u- y 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
( t9 Y% w9 X5 p q2 K) `
7 R" Q9 H* ?( ^5 A) }% J+ ^ 〈tr〉
$ L- u% n! `/ K7 I$ G/ w% b7 \
8 i! q) k0 ?" S 〈td〉/ t2 p" _% o+ H3 x3 B
( Q& x l# Z- g1 `5 K7 s% s
〈/td〉
9 f' W, F" ~- j- y7 m
8 G: t5 s' g+ t; f6 J 〈/tr〉
r7 V, y' Y/ C* ]7 Z6 S: m
3 n' r/ W0 X; w, L1 `' R/ T 〈/table〉
7 O* D' g: a8 l% ^& N
, V, J: q$ N7 w; s2 S4 i# B 〈/td〉9 D5 ]4 ^3 q, r
1 l, J+ t- I4 A 〈/tr〉! L9 k [# A1 O+ Q: V9 @
: M9 p9 X% Z$ V- M9 E; l$ D' L) @7 o 〈/table〉; E# G; s, W$ e- C2 l' x9 }8 f
& `7 c( v# t- F% Y 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
: f: A/ Q6 _ `( o3 L! u, P' X) I8 L7 s6 O' u
源代码如下：
: Y6 N/ F/ {6 K4 h2 k$ b3 b
9 t$ @/ k; v, V1 k" f `6 l/ W 〈table border="0" bgcolor=white〉2 ]1 T9 o0 ] `9 I) E8 u i1 O5 O
! n& a+ d* o) _* ^$ o, N: p
〈tr〉! q2 U6 @$ F4 h: x
- t4 i. C; D* i, k
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉* E: w' Y* T h5 p* @( m
6 O; N7 Z+ ~; N0 @+ o; }# y9 ?
〈/td〉! f$ E+ L( m& B
! Q# y2 F( I1 S# E- K0 W! `0 y
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
2 D, ?9 a/ Q& A2 r4 n
6 c! M9 }3 S% d- n# J 〈/td〉
3 s9 A& `2 A7 C
/ t1 {' I! g I 〈/tr〉
% n3 S- ? N7 t* ?6 u4 N$ K- V& E3 M' c4 ?( q7 L
〈tr〉
* @" ^+ f0 r4 D" B( S- O$ {( n
( L, W, J9 f8 S6 m& _% \: e: G 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉% D- ]8 e6 v* f. E) A* \2 e
% l( _& }: s4 @4 P1 Z
〈/td〉
8 s2 N( A; i& i2 x
6 O2 i3 w; C0 q* Y5 ]8 \7 O 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉/ ] t& S: @- A* I3 |
6 {) `2 D' z0 Z5 t8 a5 x7 \! l1 W" v8 \2 I N+ S
〈/td〉8 i+ M. I8 A! `" H* l2 @) b
* w3 X9 f/ F7 u S) ~- J# @ 〈/tr〉7 H- ]% [" X+ t0 A1 k; C# v: v r
* ^ {/ w4 E; h; X; f3 ? 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|