|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
" a0 [; \ s) N/ n1 `3 C 7 V9 p7 w7 w5 ?% r0 ]& z! ?# N) N
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
" I2 ?/ _8 V) ^% y4 h( k K' N4 f- ^$ U4 {* C! T- o
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
% M% v2 w4 ]% e! W0 X2 j2 c3 \4 [2 C5 y, R' _) i
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
+ P6 @/ c& \6 f& D% v' a
, q% Z, O5 d6 ~5 I; \; z 〈tr〉
+ l. U( i& A- Y( p# ] Z3 w
9 v/ m% a3 f, |+ p! ~" y5 c 〈td〉
3 W9 U6 M3 @ D0 ^+ d! v: H. S" w5 n5 z, X- t
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
7 y4 ^, P: l7 x8 D
2 J! Z: ^* ]8 @- I% B* f. V 〈tr〉
+ M- ^( O- y) ^# l/ I; B) t, T( n! \: c C0 t! N5 `
〈td〉+ F! c2 x0 a% e1 ^
G' n3 g* i& I" d7 _ 〈/td〉6 b( z8 K; J. L8 @! Y+ P
* ^+ O# I" q' ?5 _
〈/tr〉
7 O% b0 B) \# G; P) S) }3 L& h& _" Z3 o
〈/table〉
, ^# p8 `5 r& h$ m! s1 O; C9 ]4 c! \3 @5 y) X! F
〈/td〉
- A2 P# g' g' V7 k- v
5 A& a6 D- o& [& z! t 〈/tr〉
7 v1 v7 W* h6 r/ S' p0 X7 E9 b' k6 t- [9 n$ f
〈/table〉( ~/ r; \9 Q0 ?# r- N
. }8 g5 R: D- o+ r8 t 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ j+ M* `+ _7 c$ I2 v* Q+ `) O. O( C' B: {1 z
源代码如下：
- z! ]: f: Y* d+ n; l
- s: D% ]6 W! D6 n! M9 A% N 〈table border="0" bgcolor=white〉9 x! h5 Z, G$ M, V
4 y3 }0 o m" D; U3 t+ n 〈tr〉
- m9 n+ g& v" ^# L. r6 P2 g4 Y4 M3 d6 M! Z. s) I+ n4 M5 _9 Q. t2 T$ t* k5 |0 ]
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
O( n9 J" H. z, b6 h
8 [7 ?4 j3 K, X 〈/td〉
2 w: ^7 }4 M3 U$ H5 d7 Q% I" O$ ~7 d
: N& Y, Z! o, _( \- X4 R# M 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉$ C! E6 Y _5 j" r
7 S/ u+ _6 @' F0 ^
〈/td〉
; _& X( M8 W6 q9 Q3 I- g) E' E# t8 f' X% \) r
〈/tr〉
1 |) h# s2 d5 |% X- p& u0 H* H& i7 ^ i. K
〈tr〉) \; y% Y4 x* a- i# b9 e, J0 {
6 t/ U7 u4 N& V! |0 r/ H 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* K/ R6 C0 ^# d7 {5 h( a6 M$ i+ U' g- d/ ?' w. {) B+ k
〈/td〉
+ f6 B% o4 x4 ]: b4 Y* d$ {
- _ m4 F6 T8 d- J% ^ 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉9 w' S/ N) Z: J% Q$ Q
; F9 w! `: N( z. Z; q- s4 L3 m }8 [6 }% U
〈/td〉
0 `) _9 g( Z7 w/ R# v" x8 D: P/ l
〈/tr〉
9 G% h0 j4 `/ X d( d/ h0 `: B0 M6 j) J7 C! m5 ]; T
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|