|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。/ {1 u4 F4 t% c: L! p# f+ w1 A
7 A Q+ k; `% m- f0 A" H 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。4 W" o7 q( e4 y7 S6 v% e
$ @- [+ b# u/ w 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
; `# W8 R" L; P R. p
9 j, r0 H0 C1 Z. K6 F7 h: N 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 y8 F$ J% u, {, A
) I- n5 W4 f- Z( B* N 〈tr〉% e0 s- \9 j$ J7 T/ o x) v
+ B" Y3 `& e% R& }- }0 k' j 〈td〉
( Y7 B% m; u1 c" i) _5 v% P9 i3 C1 S. ^! D: M' Z0 |/ f
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
' E/ l8 ], a4 b5 V
. d4 b& f" i7 d* N, b. a 〈tr〉& Z& w5 I- H' U* {+ g; t
* S3 \1 {+ n$ \; O, u
〈td〉
2 r) D. V) c, _* j/ `+ `. U+ f+ R
% n) m9 Z5 E$ `5 w7 u0 ? 〈/td〉
% T7 ^3 Q: P2 j/ L" r. ?9 a
1 F; H% U* A% z7 |$ v 〈/tr〉: ^, Q) o* |% ?- @* B/ j, A
# a3 J! e3 t T6 A/ p& a; x 〈/table〉. ]: M( v: }% R; P
- @& Q6 `" b' W" B9 S3 V: p
〈/td〉
' H. x7 M6 [% X2 h2 u# c, R# ^ D
〈/tr〉
; P) l+ U% k7 s; k1 z
a8 p4 [6 B6 |' d 〈/table〉
H0 f1 j, F, q8 C) U. r& V; }/ ^, v% c4 s% J8 |2 {
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
+ P. l* z4 U: D- K* o. K$ j; L
" h, U% E3 f$ d- d1 S! X ? 源代码如下：& \2 ~% ^$ O4 }1 P5 A& C/ W, d
0 ]9 t9 u' V( X+ S# p2 i 〈table border="0" bgcolor=white〉$ J+ R( I7 ~& {; F6 g J' G* V
* |3 a+ N1 O& |! R" @0 R5 \0 I) N; z 〈tr〉- P- y, m0 y N/ W t8 B a
% B3 ^0 J" u) P9 N8 V. h* s
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
0 ^4 V- w) ` r" R% V
; P& z4 q7 r) R3 e 〈/td〉
4 y5 M. o4 k( ]8 J6 }, f3 R
/ z+ i* [% U# s t 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: m/ c, M4 ?7 y ^& p5 x
( P t5 x/ w* _5 O( s0 j 〈/td〉: a" e# b- p7 q
) F0 w3 `3 D2 ^& Q 〈/tr〉
' w0 A. O0 }6 V! i: H" a: i J Z& _+ j* S1 d
〈tr〉2 I( g, r; s, `9 ?
8 h2 q% i+ g9 B8 y3 f( y
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* j: u; }( H, B4 }" _% [6 @
0 Y5 |8 r4 H" {9 u0 p 〈/td〉0 R, T' V- V# v# u2 x
$ z H1 b' C* K* \6 _( ~4 Z9 j
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
" _! P. c: A; F1 F6 m" d5 ^1 W5 ]5 F8 C$ |( G: W8 J
' m2 b w& Q( _ 〈/td〉
! |: c/ w# s1 F# f0 q
% a$ ~" L# C( D; I& F 〈/tr〉. g( _$ a' q% G' E3 n
) r# l) w/ ?% v" E 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|