|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。& G, T9 Z) ?& J! ]0 g/ |
) ]# G% a& F) `* _) K1 K G$ W
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。! g1 B l; `! ~( ^& Y \0 L. O
9 `% l7 R5 O. U% O
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：# B7 a9 f. i! R \' A
" u. o0 z6 u& {
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
& O8 ^" }. W/ g3 j: Q
1 y. _" t( z0 H- u6 C! U) | 〈tr〉
* X5 j: h3 `( [& k: h( \
! x! M( ^, o" x f3 T* Z+ Q0 t Q" ^) I 〈td〉
% f7 u* p6 ?* U
7 B" G S. ^0 z6 s$ R5 q 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
$ ?$ w: \ ?" j. f4 h: s0 R
0 g8 `% L( C, c" i( U8 `0 A$ ? 〈tr〉0 [. p! b r0 p
: b0 \/ Y) ]5 Z* k) X! M& c% v
〈td〉
6 }( |! D3 _! |" Q# ]+ s$ L' M$ S* m9 A5 W
〈/td〉
, U J# v! T! ^) O& Q+ O' n' |) D5 ^8 o7 Z7 P! y! h
〈/tr〉
- T' G& e$ P9 i W- A4 Y* G$ c: p2 G: B" X7 h2 ]; n
〈/table〉
% W3 }) N& D/ j- m& ]: f4 o
) h4 f( Q7 Q$ k: m; L' I 〈/td〉
$ n: K0 d& X! Q; m! B9 ^: h" A6 G4 e, l d
〈/tr〉) Z+ i& `% d& N
" c. U: l, X, O7 Q5 X* X( f8 e+ V( W 〈/table〉 L) k5 L) N; y
3 q% C' q+ ~* F) y* R 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。) \' y/ w5 G0 E
2 N" y0 K2 ^7 ]% F% V 源代码如下：
- i c- C7 k: o7 m* Y" H* ^, w$ K- s! [$ j$ J; Z, J. i+ v6 K. b; i8 `
〈table border="0" bgcolor=white〉
4 ` E0 u. Z* W% A
, P$ O; U4 ?) c/ X3 r 〈tr〉
; u9 O4 D9 h' m' i, g0 B3 W S- l9 `1 |7 `& u* g
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 z3 J$ s h: o0 K% U F( ?% I' }+ o! I# r
〈/td〉) _" r6 S- q- N
F4 t0 \& d8 `; h4 b4 K
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉2 E5 X! U9 u8 A! H: V! H7 ~
4 O& l9 j8 u4 ?: {2 D; H$ E6 p
〈/td〉
9 A* v2 J- }. L8 x$ z+ H8 j6 }2 o) M4 ~4 M
〈/tr〉
( U1 H# ^2 V# Z, G5 ~4 ]# w# s n' q$ B9 w4 I
〈tr〉
1 a; I. A) D6 s* @% b2 n' I
* \4 j; a; F7 t2 I( i" O 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
! u' e0 m8 a" ?/ o
* H, |9 U. b6 A2 X$ v 〈/td〉
% f9 f( q5 x8 D
) z& [- i' b7 t2 _ 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉 ?6 H( u8 t0 l! d' F4 T: ^
; W/ \2 h9 @7 d, n& |; i1 ?: e" E+ Z9 c; _' y- Y) u
〈/td〉
5 |% H4 o6 p# a" {. c% h0 u, T/ z$ |" u1 C" G
〈/tr〉
2 D0 U$ u. n4 P+ O& }% M
- Y s( u% f! U7 u8 [ 〈/table〉 |
|
发表于 2008-1-19 22:20
| 