|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。' u* _! @& {8 _# B2 f1 o
3 G5 ]$ W) i5 S0 Y5 `, P4 s
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。+ z5 V( x+ ?. b2 j- d! I
, v" F T2 K& o* \% V- u5 o
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
: @# ?. a4 ~* R) v
+ c/ b( |! L& u) c* n 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
2 `+ M6 z; r: b8 v; k T3 ]0 n2 P" y' x
〈tr〉1 b- i1 H) B( O& F
! b+ J$ r' G- _& e% v z) c& e- o
〈td〉' a# U4 _! t/ V- k" q" F1 a
( _, _9 V! W4 l6 s' I9 B# d2 \4 W 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉, B' [1 x3 F1 e$ v9 E0 r
; Y2 B! L+ `' _
〈tr〉
% [/ Q* o5 b2 g" N5 i& G! g' y% |
: A! C* s F8 B 〈td〉6 H1 a$ O9 k( S$ T( |6 Z- x
: E& N0 D2 E: {7 ~ 〈/td〉" y/ L6 ^, u5 ^9 r
# P! Z- H0 M! g4 Y. t 〈/tr〉
q; @3 t! i) @5 V5 @1 Z$ Z0 x' e% y
7 @; D! [" L2 R! P 〈/table〉
\: ]$ m8 P# G
# e- |, {- t. i. X$ r' E0 t7 r 〈/td〉( r( }& N0 R+ \# Z3 q! P; T! o
9 A3 `+ n. l3 O2 `
〈/tr〉
* U: L% d- c4 f2 S# S- @
+ e/ o4 O7 c8 Q7 S( a& ^ 〈/table〉) d; g% l* V2 }$ N6 x2 g$ w
& h- n# U V8 x% |! _% \& ^
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
& z- A+ b; a4 X/ [6 U" z- Y" ?% b2 l( W1 y
源代码如下：3 ?' {- s, g/ r) T: p/ v
7 b. p m) m9 [0 H; ^
〈table border="0" bgcolor=white〉4 K2 `; x O, R$ Q2 Y
5 Y0 V: M/ q# z, n# M
〈tr〉8 e- {4 d9 X7 o. A
, w d; {# m$ f3 v( `1 O& z
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉5 B E F/ w# \# [5 g$ `& M
4 j; ~$ d4 i# p' z- j" y
〈/td〉7 B6 f1 Q& u" r( ^: | ?
& P9 p5 E) ]+ ^! S. W5 D 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
2 p+ Q- [, K9 ?; }2 ] V8 h2 r
# I) Y% R: B" m% d+ d1 E# e 〈/td〉
+ N* t0 d3 w) c% n" L% ^( S G3 C% U
〈/tr〉9 ^3 z: B) W J" b/ q0 b. g2 {
6 I9 F1 U9 S7 W2 N2 I
〈tr〉
6 `7 O& C3 p! d; [3 V' f; L4 q7 l. u0 n( R7 s5 R8 I' V1 N4 l$ e
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 Y5 T5 A: S0 `8 {
2 x: g" w5 P" o 〈/td〉/ e6 b$ Y5 k" i5 s
$ l* r- S$ ~1 `. P2 j
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
% c+ A2 w! s4 X5 u- D0 a$ D+ Y; a1 M! ?& @% e3 {
# {( R6 ^0 S1 C! K+ T 〈/td〉
: u% V& j3 }( f5 i3 c
% f! M! s' g5 a" N, F 〈/tr〉9 f" k1 _- h7 }/ z+ D7 }
+ s1 f. j8 q/ J8 s' m 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|