|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
. J6 m- U7 G t, F: q4 ? 5 t6 ]! }7 o- z$ `, p4 Q- O$ u" K% [
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。4 C: O7 `2 p' r1 L% u# k5 h
2 v4 t) j* @+ \( H" Y" g1 X
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：6 z1 u, a1 r6 D1 v
# e" X' L2 J0 b9 g4 |; f 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
; G9 S0 l" u1 C& t" |8 m
" T' O1 R& X% Q& ?2 T+ @3 q2 g 〈tr〉' M, r+ V% y" S J" \$ n
6 v* Z2 a3 F3 f$ O5 b' Q" O6 g
〈td〉
5 h3 u/ B+ F$ W K' |% P9 P" \- v$ O9 J: t
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 R( K ~: M% W* i$ J D$ M& K
9 t* s6 j" j$ L
〈tr〉
( G: G" r7 u& Q. k+ @) e# S5 G9 }4 u4 W: c/ h P
〈td〉0 i! U+ q2 V; P6 b
}" P0 u+ P8 r+ H2 @+ ?0 L 〈/td〉! z0 E0 j- B2 i# \- o7 v3 P
# V N7 b! F* P; _2 P
〈/tr〉
% f9 z* v' r8 f: C7 Q4 G, `8 r* y3 P& [6 _4 L1 [; Q: V
〈/table〉7 d3 n2 p1 Z! g4 W% A
1 |/ {, j8 ^9 K6 K# V) ] 〈/td〉+ W% M$ m, v/ q6 K5 o2 i4 A' k
' N4 M1 r: g& V+ v 〈/tr〉
7 u6 V" L- ?0 C1 d) x: J& a8 p" G1 m: V* B* r
〈/table〉 Y8 L& r: n }3 M. _1 o) P
7 ?% v5 m) ?% X6 e& o7 [5 u) {- }
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( U) j4 B; x% N, d5 m
% x& _( \% A7 y# n4 J* ` 源代码如下：' v; r) `1 e2 ?! s$ m
3 k( A5 k0 R& p( `
〈table border="0" bgcolor=white〉( }2 S' b, _6 P. G$ m
1 n* ?! M) m& a/ y# v0 o8 z 〈tr〉1 C- O7 p4 \/ i9 W9 C- K
( h7 {3 O( u1 G8 A) k9 m" m 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
2 C0 t4 y- {' z* Z# s# J6 `6 y" k! n+ i. w, M' }
〈/td〉
: N' _& N$ Q* l7 w' i, c) ^0 J$ e, W' M+ |( a) H9 s
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉& G( B. f7 H& x! s1 [
7 x7 Y$ [1 [4 d7 u. ~ 〈/td〉+ r2 a- u. k7 |: R: R/ }% H
b+ [+ v" B2 ]+ W2 l. j 〈/tr〉2 T. |: w" V) i$ P: R. f) `! m; D
' f, z' A: i+ r/ D* f" S; l* o/ B 〈tr〉
7 U0 F& u" |$ m
9 x8 j/ _2 z c% w7 h% Y/ d7 o 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉9 ]- x+ G' e+ e! v* a* w
4 `( N$ H' j/ P4 c! v3 u I 〈/td〉
8 Q3 F( [) U, ?9 I2 f' ^- j [/ |
/ Q G. o' Y' \0 O6 M0 m 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉, I" p1 y; Y5 K! J3 B
" ]) K: {, x6 o8 x( C$ q8 e- t9 h# ?$ B! }" K2 h4 N: V
〈/td〉2 F% I8 a* j0 c; i+ K1 ?) c
# }/ J( V( s) H/ N$ R; | 〈/tr〉
% W3 M7 x5 E% i9 Y+ k- d& j& L( h7 o8 P. X5 {- c! u
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|