|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
* C" X$ Q; a! f) X& d 8 R) I$ d ]* J8 x' I
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。1 Y" ^1 r2 i, J
7 a7 [% B; L# U) P/ |* I, X 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：- N# M: @7 E2 ?: L0 G; \
( |6 ]1 \9 \0 \- S$ d 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉2 d+ V* {: D2 X$ Y5 A
0 G3 |8 z" t- B8 R, z/ A% [
〈tr〉
' }7 d3 h6 @- L, p# n, N( s' G) @% l
〈td〉7 T* f& F5 _9 E; h' B* ?% g
0 y5 Z# [# e6 e+ r 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
9 _9 N; x0 I/ ~% [
3 v3 d; P% `2 n 〈tr〉3 J5 H- `. |% L5 i
5 `$ o. Y& P6 X, i _( Q
〈td〉4 x( e- q. j- R* n( x
8 }; Z, n* M0 W! G/ X9 R5 N; X 〈/td〉
9 D% K; B3 l* V$ p0 o/ c" U
& l9 z1 d# `7 \7 _ 〈/tr〉3 M3 v; E! {2 |9 ]+ d& `
4 W" j8 K7 `. S; N! }# T8 Q7 I
〈/table〉$ T# Z+ E) `# c2 ~) ?. @: q
* x0 { |1 _4 }: a2 f' L8 M1 f 〈/td〉
) `6 {3 F+ `) J7 ~: ^3 `- f: o5 k C1 J
〈/tr〉
6 b' j6 O! C' M. ^& A) ]' y6 k% r: l
! H- g0 B0 i# w5 @3 U- z* E0 M 〈/table〉7 ^. f8 v9 U! I" ]
c C' r" Y$ t! x0 M% Z
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( A6 g8 z4 {( i) O8 K1 z
9 S2 ]; G, m. R 源代码如下：
& T3 @ `2 Q0 U8 C' c. s2 a2 t5 E
" Z+ P; J: \) x7 a) s 〈table border="0" bgcolor=white〉
1 C0 G2 ~, F5 d0 ^2 ?; x
9 A, x$ g P N( K 〈tr〉/ @8 g# Q$ K. X6 _! [8 |8 }) f) x
1 B& e: s3 A) K0 j t 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
# T7 w! m: Q4 H' T
/ X& h6 V4 C: Y! \$ T& o 〈/td〉. g6 W7 w0 I9 q* _6 O
$ p: d# k1 n. N% _ A9 k
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
5 J9 e. k7 A& y( R4 [& T/ ]0 r$ N
- k" A9 s9 T, T$ M) z3 [$ r* |' K8 q( S 〈/td〉
# w- k/ Y0 V) v# Z4 t1 x# L c0 C) m0 F
〈/tr〉# w2 R7 \' ?5 ^/ V; p
- R- g. ^( D2 o0 w% b m
〈tr〉( z, ]9 ]0 d' k% l7 a' X
, I6 m" @. {; q: q4 y 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, {0 S& a9 p' E, B
1 ]7 d# ?* P- Z3 T! ~6 `( \) O 〈/td〉
0 Y! i8 q w: r/ V I6 B- c4 z7 i- a7 L
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
6 B [, J1 \$ |; x. P: w9 {; q; X+ T
0 L+ d" e, E- U' S" n1 p 〈/td〉/ B$ r& W9 ~. B' C2 N* }- d
7 i' t; x+ O8 e 〈/tr〉
- q; X6 h$ m8 W5 K
' A( `- T* x" G3 a. ~9 c- @ 〈/table〉 |
|
发表于 2008-1-19 22:20
| 