|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
- E2 f( V4 R( o) U. Q; J0 z% K( f
$ F$ N M* i7 A3 ^) J6 e 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 K& y b/ c* l4 S
, K" B& Q' j3 s3 N 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：7 ?) W8 p M0 q9 x- D4 @4 \" ^
3 J/ g4 n6 v7 Z: g 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
, E1 t1 `7 B5 x0 s. U7 B( C
: V9 |4 C4 s, ?6 ^4 u8 j 〈tr〉0 ]* f2 U" [' _+ M6 R
0 }% p8 u) W# _5 I" d6 ] 〈td〉4 D) U/ Y! \& Y' G0 K4 h
+ s* n3 c6 m6 t8 g; c: S4 o( }
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉. F( U% l( a! G9 D4 ]: `6 K0 q9 C
% ^8 P: \; p4 ?: {9 R8 n$ m 〈tr〉
( }" ~- \* q( Z, h' Q: L/ ~3 b# C8 P3 U7 ^( z5 x. }
〈td〉
' i9 d) {' \5 |' a$ ~' T6 N. t) [" c& q {/ e5 G8 M
〈/td〉
, y% ?& r. z3 r, d
' ^8 O# H! J/ E4 V- d 〈/tr〉6 s3 X/ G7 [6 a$ s
6 H( A8 F+ D! W7 F( v5 _$ c 〈/table〉2 G% x; |: o ?8 q+ x
$ |3 }- {2 z0 }% z
〈/td〉
3 k1 i/ i1 Z' o* D) N5 k: Y' G' j+ G5 q, `. Y$ c
〈/tr〉# `5 U7 O8 o8 \+ F# ]; w. O# j
* i% L& y7 t v
〈/table〉
( s- k, D: G- T
3 E0 k P! N0 `4 ?5 o, _9 Q: B: O 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。- v# C2 G+ D/ M5 O: `! m, d8 o
9 C( p3 j7 X j/ c) h& c
源代码如下：4 T) w, H& X/ p" R# {8 ?4 e
/ R$ c0 L! O' ] 〈table border="0" bgcolor=white〉
/ I4 L6 H& {" [* a; j
+ `7 l1 j' I( p; `6 R1 Q) B+ e2 q. S 〈tr〉
) t9 q' r3 _4 A4 g$ j( G% _3 r3 z! R2 B- e1 e: G
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉( }2 \/ {8 f1 `+ z% s, u
" J0 }, M$ W' Q+ m 〈/td〉& c& N& \. j3 b7 a9 {
4 E; q: z8 X. u5 x: w9 C8 E 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉7 f. g8 Y5 x+ R. q2 b; r. z: h2 e
# B9 |8 U: ]1 S' P3 o, h
〈/td〉
+ h( N1 E" @2 O! ~) Q E% ~. J- h2 F+ r0 t
〈/tr〉: a0 E( S5 e2 w: _; x& Z
+ H D0 k/ n$ `9 x/ i 〈tr〉
1 ~& s3 B! B% |% J6 y( g+ ?' [" y% ?$ Q! t! j0 {& L! Y5 O
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉8 l$ j9 u1 I9 H" ]
6 Q0 y: T0 S, c 〈/td〉
: g$ a- L: k. j- R; O; p5 P- U5 p" ]: B9 q
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉. Z: }1 [, b* L) V: }; ~. ?* _
) q4 J {4 C" T7 q6 a1 S
& O! A* e$ O/ _& D
〈/td〉0 Q. u4 Q( w+ z
) N" a& e. q- Z6 A4 c
〈/tr〉
" L' Z% S" I3 U" o3 T$ |
e ?( [. `; A/ \+ B! @ 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|