|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
8 j0 I3 E3 k# n) c
* y4 _6 C+ K( O) l 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% ^- Z. m/ x$ k+ U! N+ d% `
, _$ i0 h9 @! e8 P" ~
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
y6 n2 o8 B m1 ~9 d5 o0 F
" ?3 s, u! i& _5 {0 A+ g 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉7 o: z5 N- q+ q3 v) ~8 H; a+ Z1 X
. m' V4 D5 R$ U2 h
〈tr〉
( p7 v/ G+ \! `! o4 ]$ |3 W5 {$ h8 C( G3 O2 y( h
〈td〉
' Q* W6 A% X6 q3 D+ F' U& u' I; e+ ?4 E( F
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉/ M/ N& R' Y& d) p
, A1 S" N, ?8 Q
〈tr〉
* U2 \ c) r4 ]2 d" ]8 X F3 g+ y1 }5 f3 U" ~& W) r( u
〈td〉9 ?: g! f3 S% Z3 Q, Q" b8 I
% V5 w6 Q% |- f7 K- j Y# e" I
〈/td〉3 {, w9 n: [& y
% A: o7 V `& D9 U) }! J" t' p F 〈/tr〉$ o' i: M3 P3 b( G% ^
2 P% S# P. N. F- \
〈/table〉+ R5 w, }9 C2 Z7 Z3 R
3 V9 n" I( T3 J# v! [) m
〈/td〉
+ V. ^/ z$ p2 f0 e
, C& U6 D; k: M! O0 l( V/ J 〈/tr〉
& ]9 U; `0 v& g3 |9 Y& n. H9 U* B' C/ `7 V; d9 y, j/ x
〈/table〉
0 O+ g0 P6 m, J8 d/ \2 Z6 ]$ J" S
# _3 }6 g9 W _( H8 P4 U# i! I 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。; N# g0 a; h9 J7 t+ m- u
; W. |" b$ @( Z; u$ l
源代码如下：
2 i* R1 E/ f/ i# {( a: L+ Y2 S3 W& B* [
〈table border="0" bgcolor=white〉
, R8 O3 w! E. S8 e- t. }, I% A8 b$ t! q- d
〈tr〉+ V% r" Q! N; W9 h1 |& _
7 [9 Z5 l- `: k, x. O" N* Y1 x
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
! L5 r/ Y; F. r, T" m# v/ @' U0 }
* o0 G! J: T1 F# R# r' Y 〈/td〉
6 a( H6 R; B; j; y# P+ K& o2 }% ^' F$ @' m
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉! L I5 Z; n f/ o
5 m$ f6 J! D$ v# n! R' D2 s) t" t6 W- ~
〈/td〉, ?( t" i: R" u- }2 F7 x
/ X1 {8 O# n4 @# Q 〈/tr〉& [8 C- E: A( t- W7 s
: r! V) i6 {7 a& G' I; c 〈tr〉: G9 R/ @3 }8 W3 p3 L% v8 B
+ A1 X1 u# z. U) G0 ]4 R3 o$ { 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉1 f; B) R& y4 }' p; B8 ^ _
# D) {0 y2 b4 H" x' z( { 〈/td〉# E3 s+ L; [2 o( B( ~
+ @3 F1 i- @; l, G( b# }8 \# q0 D. ~
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉* p5 y) a. a3 Z
; n" [* P* C. f
, l9 \# x4 s5 l* }. B 〈/td〉
2 G: G3 f* ]+ Y$ i# f! z. `: L/ {! D
〈/tr〉, C% b" s. [- a. p( {9 l
4 H, E$ T4 [" x' I: V
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|