标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
* C8 m2 l6 k1 d0 T
% C1 M( D3 ~- q$ x
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
2 H; |" I/ k2 ?0 c2 p! m
4 b! y, D3 y; H, u, E3 A3 w
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
F' e$ C" q- o3 i7 t$ l. s- |# I
1 K6 b& ~! V! i5 \/ G! R
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
$ r( X! u& X% ^0 O% ?% G4 R; `# H6 c
3 O( z& E. N0 L
〈tr〉
8 Z3 `6 R+ Q$ _% j r( K
! C+ O) @% m9 d* _: [, M
〈td〉
4 D, h$ D7 `& P
" C+ q7 B) J- c! E& }4 \! Q
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
0 C8 n s# Y2 Q4 l$ _$ L2 x
4 E8 d: G+ d! ~3 R' Q# f
〈tr〉
4 Y7 j, q/ |% F1 X. M6 O' ~, f
1 L# ^; D+ V. c6 y
〈td〉
/ `. i3 h3 B/ B% U$ T
. O ~- v" Y0 U8 [& f) |* W; O
〈/td〉
1 Z# a2 \2 f9 F' q3 I
, m- L2 x/ `2 X Z3 H- g
〈/tr〉
& V0 H5 p) ^9 D# t5 u, z
5 K( y- U( o% L) ~
〈/table〉
3 n/ T/ C# Q$ p1 u9 p0 \/ Y$ E
3 o5 j6 b1 w$ \% c' @2 B2 C
〈/td〉
' K ~" y6 C; q2 E& q/ i8 |
+ l$ K) }5 K- q+ C" [8 M! U
〈/tr〉
& ^/ I |) Z4 ]) `% X
% [: ~% m4 {, z; o8 e4 H1 c# `
〈/table〉
( L' K+ @+ V3 V3 v
& K% T2 g' }; ^, a1 e; Q' [1 f
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
, F; D' y% A) H4 X- _7 P3 e
R8 t! v' M# ^" E3 K! v
源代码如下：
* W; _8 v+ Y- d, X# m: u9 x
5 r$ [$ z2 h8 }! M( P: y; j6 K: h
〈table border="0" bgcolor=white〉
0 e' M5 O& {- @0 F: \% V
/ E) o5 r: H+ M7 J: T8 `' M
〈tr〉
% \ L0 m4 u% m% O" Q
3 {" ^' c N* M3 K
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
; w+ i* S) s2 F% o
' G8 H' B% ~/ A8 P4 M( \) u
〈/td〉
: n, g4 l9 V, H% E9 y/ s
0 J7 x& q; [: V+ \! w5 B( ^2 D8 D
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
/ P) x. ]2 J6 ^1 `; c9 @! B
- K8 b5 `8 x* H9 O6 t m' q
〈/td〉
5 b$ I# R2 j4 w! w. V
+ ~' b h; [9 c
〈/tr〉
1 n) z8 @& j: r! |* Y
* K7 u# ?6 S2 [1 P
〈tr〉
/ V& e& V- p" u" ?( I- [5 V7 U
7 O0 b5 w2 r0 O+ a
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
) W6 h1 X, u7 Y8 `# @7 D% } C
7 u% X y* o$ `8 c; h3 z
〈/td〉
$ `( `* \1 Y. a- g; R
8 Y, T4 D! X! _2 M4 s
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
/ v8 g! Y% h5 g/ I: K. \
5 P r( ]& p1 y& p; T2 ~
* H( K6 e. G" I$ Y v$ f: ~
〈/td〉
1 r4 \) F8 B& W
+ D! J g7 {' `
〈/tr〉
6 v4 V) F. A2 n3 _# e% c
* b+ E, m: ^) E: l- q
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
