|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。+ C A# \- {$ u
8 p9 [) F3 P0 h 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
3 ~ r3 J2 _! z3 l8 I& P
4 z( \# V/ V* | 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：7 T; _9 i7 p7 [, U/ T& ~
0 h# L5 r, \* T3 ~& c9 _ 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
8 B$ f! D& |+ s6 N8 L, t! Z# R; m: o) I/ R% {
〈tr〉
* _ V7 d+ B$ f, [' w2 W- y) k) {% k( P4 T
〈td〉/ R2 p3 j1 x+ n) k7 V% C
. r+ J& Z: J% I' m( h% F2 f
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
. ~2 W3 b3 z) C- G% c) E' K' {0 E/ X, s# ] H' E3 v
〈tr〉; \1 \; |+ D7 @
* s" X9 m8 i5 V5 L+ K
〈td〉: C( E7 q" S8 y1 ]! W- {6 b8 \
' H9 ^0 @7 N {: \ 〈/td〉4 E4 H5 q7 R- N/ B! |& A
; G2 i7 D2 R% D9 T! ~6 ~
〈/tr〉$ K* e8 _$ {1 s5 _: a1 ?) k* W7 o
3 R+ d" {" g# L
〈/table〉
* w' S$ o( Y" _3 L N- L; U( H, g4 L% n
〈/td〉' e1 L7 u0 x$ q" ?0 [4 b% Q
( x9 l, ^" G4 U s% t5 y 〈/tr〉) L: ^+ j) D' e+ [4 |: k9 b
0 [( ]+ A7 [& E k8 Z! N 〈/table〉# X9 ]& t" T/ R+ H. S0 R C2 R
, A+ U8 K1 f a" [5 Y& Q3 S) r
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
, }# ?8 O: A: Z# W1 u; u& z0 m8 X5 b, P, H ~3 V# G/ G3 ] A
源代码如下：( a7 k t0 r/ j7 q2 z: A0 X
+ U' W* D8 q7 e3 \! ~/ N* {
〈table border="0" bgcolor=white〉
2 m1 B% i! o1 f0 [. g+ a8 w7 y k8 G/ D: X2 M$ N9 y- T+ n" A7 v
〈tr〉
5 I2 {) X, ^3 a; X& E0 ~
" w+ J, P5 k; N% H+ F: Z# O 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
" o( k; s! S: H; o+ A9 p# [. |$ l5 H
〈/td〉
* P7 B* }" ]& ]9 f( z3 N& e" F: w* p* h& Y- h' Q
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
' z' w! V& M/ J% C; ?7 `$ ~: K- b% o1 w4 ]- f$ M# [
〈/td〉
1 } y; g' K! n4 y: ~0 |. I, @) n
4 w2 u* n) b$ k& K1 ~% h; H# @ 〈/tr〉
* K; n, b- O; h6 ]6 x5 k; P& n9 t& t$ J
- j6 z& v4 p3 Y2 G) U2 `5 | 〈tr〉
) A- x2 x! z0 O/ ^. d" _+ B# ~+ P/ u' [6 r+ Y1 p- k
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉6 U9 A! ^, _& h* M/ K
+ E2 D, H3 k6 h& R7 H" [/ P- \
〈/td〉( M; B0 r7 S+ r) L
) ^0 y5 |! L+ J1 W4 n c 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉! O- H7 X* B2 [
1 C) z9 V F% |5 Z1 a, W( x* ` V, i3 L0 d5 j# u( g. Y4 k
〈/td〉4 b1 \+ F" A# \. X) ]* P2 `2 q
1 g) ?4 G) l% ]5 Y5 ~ 〈/tr〉0 \7 P, E6 Q/ n1 a, Q+ z
# r4 P4 G2 ~( O" t
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|