|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。. ]% s% c5 y+ R) D3 L
7 X* _8 K. {2 t; A& b) Q 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。9 H Z2 e: Q' F4 `& a7 J
/ p% K/ W) }+ a 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：8 {! a% |- _* b. l, ^
6 c. {- h3 y9 G2 Y6 r 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉" B4 G. S9 m# X6 h6 V5 r8 @( ~
+ Y3 H4 B6 f) v+ C( E5 e 〈tr〉
1 w1 m. D5 M: M5 Q/ d/ h2 m! z4 V0 g4 U, t1 c
〈td〉+ m% q- \/ v; A! z2 Z* _0 N
8 w1 J$ R* M; U$ J8 g. y0 C 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 W- n5 u% Q3 o" `( l" O
* H. I9 ^( P% {: j n 〈tr〉
5 t J6 Q( ?; S( S* E, d2 M: v: C& H' z# s2 I" [4 N
〈td〉$ J' I1 P5 C1 b0 W
, \3 [" l! j& m) F( }
〈/td〉
5 \. h9 s9 u5 F# e$ \/ f9 r+ M! N/ I; t, U( u1 e7 h: T
〈/tr〉
1 j$ h% |7 ]# f. B3 d& W4 C( |3 T& p6 M; t9 W+ B
〈/table〉7 m4 V- y. A; Z/ L
0 H9 |( A; q+ {/ i+ Q/ [
〈/td〉
2 Q- _& [3 ~6 n
# W( {- A7 f( V, n 〈/tr〉
8 T% [; C- `" c0 l/ k" d) U1 V3 Z% p$ O( T
〈/table〉
3 b3 |) W$ S/ ]3 f
! P! y9 g+ u& G 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。9 X- S# A4 E p$ q6 X) v5 G
2 e; P' C; f' p; _2 `
源代码如下：/ [0 m# Y/ U( m. u8 g
: K# G$ q; q8 i- B7 r
〈table border="0" bgcolor=white〉. m% F# X. R) z# n- G
W8 a$ p% Y; I. u4 R9 V
〈tr〉+ U" n2 z% v" @. R7 T; q( D6 N
. F4 F B3 \5 Z& X+ \
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉3 _$ ^, D; C9 ?- w# d, n
8 X; J5 [- L) o7 Q& s 〈/td〉
, o. q+ l) y9 w, @' p# C
: u7 H% o9 q: i0 Q# n 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉' V, p* L+ L6 O4 D& O
/ _: y N3 X. I0 x$ c: n 〈/td〉
. a1 g3 ?1 F7 f7 N; H+ g7 @1 R4 k. _# N9 Q0 b. C B( o# e- D# t2 s
〈/tr〉! o3 n# T! N5 f
& q( W+ C" ^* k( g% A: m1 L8 g 〈tr〉# z2 a, p% _* C: e5 `
( j- _- ? u% M G% F' e 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉1 `9 i/ u. Z9 s. p
: L2 K. m/ g$ h0 t) Q) Y 〈/td〉
" q. m# p, d, L5 _1 y" D1 m
E" m( l( g. g- j 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉* d, Q% v9 e' J" ^+ u
; E4 c. k/ j# j
3 Y7 Z0 }. j: X) W1 V# k 〈/td〉2 Z, @: T% H& v) D/ e2 x+ S9 V6 ~
5 m- j# j9 F! c7 p* v# X+ L9 X
〈/tr〉
* |/ G; ~" r/ S, x4 `# V& m) F$ S
; x5 w: t9 L. \( C6 J' f 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|