|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。 k- U" X, g8 J4 v8 L
7 I5 D& E- q1 b. l. `! \5 H 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
' Y$ A: ^6 `* ]: ~2 Y, m# N% p- L- F" E G+ f( T
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：2 p6 I" O, k) n* B
* A* C( n. _4 r: S- C
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
9 u4 _- r4 g1 k$ a; o0 C! M( U/ P% N) v( \
〈tr〉
- R1 y4 P' c! t$ y% p9 [
1 T: Z. Y; r9 q1 I) N \. \" g 〈td〉
* r- E5 O( u8 b+ |- W8 {$ N/ n
# }2 k) ?3 E' s$ l+ n1 u 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉" Z/ G F' w1 X% T2 y3 Y& @
- Y0 q' v4 _! d. M
〈tr〉9 W u7 c* N6 u1 R! j
! T; c& ^& R. y4 n3 Y1 m
〈td〉
# e7 x1 @; X; H. L8 W6 Q! z; i4 R4 @4 S7 ^4 S
〈/td〉. a! ]# H7 R A) X. m, M/ M* l6 M5 p
1 F; Z2 v- N0 r8 ?& O2 M; ? 〈/tr〉: A$ r. q, Z* E, T* y
# a s8 ]! q6 u4 ]+ t 〈/table〉
% K6 m* D: ]7 i0 \, e* B' p6 {8 d _+ ^, h
〈/td〉( _2 \+ t" N8 F3 t$ L
0 T! L4 u5 Y5 M& R
〈/tr〉
8 o0 y+ p0 J& L, y- ^. @
7 r7 ]4 V" E$ h) J* q 〈/table〉
# |' m/ {) P" k% z9 t. [, B
. z' ~- w* u a' A! [* D/ w+ F 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。: G F1 l6 p7 ] P( t
, g+ X: i! M) t3 F( \ 源代码如下：/ n/ ^2 J% I# h' k
8 L6 o) [7 o$ z- t3 x0 M4 R
〈table border="0" bgcolor=white〉6 _% s- q) H4 _! c
$ T) @: ~1 y, d0 [ F+ e4 ~* A: z+ {
〈tr〉
. }$ S4 _, \6 @5 h" ^* s# D( ^% ?% S* F4 L" B6 L
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉1 D3 A; q3 d+ u* e: i% d$ ~
8 _ Z ~ S7 A# t 〈/td〉
2 F- X$ r( H( m" s9 j1 J! A4 ~ C" `6 h3 ^* x: j* P6 d
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
' [, l! O' R1 `6 g- u1 O& S# M1 G6 Q* J' L$ x
〈/td〉
" |; T! H$ \* l$ ^+ X' H, X! g0 G7 f% [* f3 w$ @
〈/tr〉, x$ @' @3 N- l5 C4 |; {( I
2 j' E1 c# _3 {; G7 Y! o$ G
〈tr〉4 A4 W+ ]3 l) R/ H3 d4 a
. l0 c) q/ {4 W* D/ V 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉 Z( R2 k1 c! ?0 I* B
6 g& d5 O5 d4 I( m$ A$ y 〈/td〉0 Z2 Z. e4 r, Z0 N3 l
g: c8 @8 O* L' x( {0 M 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
4 A0 Z! ~4 B% G4 i+ n9 ^9 w
9 |4 c6 ]3 N0 z& s2 s V5 J A! x. T2 d( i/ |+ s" h) m# ^* N
〈/td〉- `& M9 U0 q( V, m
3 P5 \% w- o& ?, H% Y! _8 H8 A
〈/tr〉
! S# O* k9 M( `+ Q$ q
5 E& ?3 x4 z' f8 O: F4 O 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|