|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
9 y* p+ E5 i, I& X2 h7 [ # d; j3 j2 A$ n9 |6 C$ G* f
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。9 k! s, a+ {; ^: i; l5 b
, ~; L1 u# c6 ]) i# }, |% s& ^ 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
6 b- ~ {( |+ W7 j% a, z9 D
5 a! J5 t$ d+ X' x 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 ]8 }+ e2 r3 h4 n; V+ ]3 Y& s0 z. j. C* c7 m& a
〈tr〉6 v9 y+ Y( x- c8 b; g
0 T9 g& Y6 u, W4 t' x
〈td〉
2 e- e. e6 t" w6 O; g4 `$ p, e! s% _. d4 H& `' W1 `. D
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
6 s6 z8 C7 f3 ?* }6 X E. R4 {- K* _' j: V1 N
〈tr〉
3 V/ [# U& E+ H/ f
; `, Z5 u6 e/ ~ 〈td〉
9 N/ w! V9 |& j! i0 C# h/ x$ q! n4 F; i* I0 [5 c; y8 I
〈/td〉9 b+ G% H" W. x) ]8 w
" b8 _* Q! b1 Z/ I
〈/tr〉
b& I( a! d" {# M: a: ?8 t8 k
c; S1 C4 o- k+ x 〈/table〉7 C! R/ J% T- C) `0 Z4 }9 K
: M: K, b# Z: b6 b' N9 W; j
〈/td〉 E; \1 q' _; K2 S; O( \+ ~ _
+ O0 F: h" I6 V9 ~: \ 〈/tr〉6 V* D8 @: ]% r* V
0 L) j( X% [3 l: _ V 〈/table〉
& I8 g3 a: X- `! }1 [, A9 d& H! m
2 k& [8 ]; D, a7 V( x. h 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
2 [. R" H& d& l/ H4 l5 j' @
# t6 \# ^2 v r+ }0 ^6 b 源代码如下：9 F" V$ ]/ I, I( Y: @
' I& w+ m5 b) O9 X. O7 ]* e
〈table border="0" bgcolor=white〉
4 j" W* L/ s5 I
+ Z* y3 {/ Z1 w E$ M2 r' i 〈tr〉: _+ t4 s0 d$ `
8 s: }) d1 b& w- E# P+ r. V
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉; v' A7 Y0 l- \
& o' }9 U7 r& D 〈/td〉
( R1 k, H7 [4 A
# f, S! z/ q {* x- j5 _+ S 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
# h, L) I z6 Z8 Q, M) T! G1 ?
B7 Y7 h$ K" K' L) G5 P# O 〈/td〉) j6 } r4 [% [7 d
4 g4 V8 P7 A7 w+ B( T2 p" v 〈/tr〉
4 ^) B3 q$ {- h0 f1 b$ a
7 D! q8 Y& A. H 〈tr〉
% h/ c) ?& f2 O8 Q0 E8 c; r1 M0 d6 I- i1 u; J- D+ R
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
1 ?: v9 w; Y7 c# G2 R6 c$ V/ Y# z* v% N: y/ \
〈/td〉
: Q0 J$ |" K" o1 J) c) ]% r; I. h' K. t
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
! ?; T% V# ` P- O% i
) _* p( j& {( S2 w2 [/ T' D- n
7 `. F, Z5 v* l# [# r- e0 \ 〈/td〉
9 M6 _: |. a1 f$ L/ F: q8 I# b0 c6 n. R" y9 r) I: d {0 T
〈/tr〉3 y; c: U" u+ D# M+ ]: a+ n s, P0 U" t
% m& R7 K7 B! ^3 ?2 R# [" O 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|