|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。. \; p N( o1 ]
. Z3 |: C5 [: Z 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。0 h- c: ?& m4 e4 g+ G9 |
* u6 r1 x0 V7 G1 ^* V } 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：' v9 s6 W% G& O
; f, ^# M& E, U& V
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
7 h7 g7 A4 p( P) T. E2 k s6 M# _. T$ o: W$ u
〈tr〉
0 H" F# S5 N& R& c
1 R* y, `& k/ q$ h, Y3 m. o 〈td〉
/ e5 j: n% ?( M% j+ i
& B Q3 y3 Y- H# X+ @ 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
. r% E" E' V8 r9 ?) N8 q4 s. q) N! j, D4 G
〈tr〉
7 G1 y% s5 l O5 R9 b/ y4 J( O0 \: U9 w
〈td〉
; z I1 [% x7 B! ]/ `: H: [$ L* t
( X N' q: w& d 〈/td〉5 N7 r: C1 `& B/ @. o+ y( N$ B
: n6 H6 i# P' _; @3 Q5 p
〈/tr〉
$ f) c# p" X$ H
7 t' x6 Y) r+ ~$ @- ]4 I, `) G5 L 〈/table〉
: `- A1 \7 U& f. J3 }0 I( j$ w7 D9 o8 R6 t( A' Q
〈/td〉
& W7 k$ i5 S7 e9 c8 P" X; Q0 D" H7 V$ X8 m% r
〈/tr〉
# `9 f, d+ G6 Z8 O& f4 Q
) p- v, _0 E( Y' z: ? 〈/table〉4 }) s$ J1 F, H D
( T' t7 m4 c- Q6 g- ~" t- T 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。: U5 y8 Z0 P8 z
9 D3 z3 S9 C( Q. e 源代码如下：
$ P+ G z$ B) p' B1 H0 o( y5 `% f, _' P0 N1 m1 V1 c4 v4 T! f
〈table border="0" bgcolor=white〉
; l3 n0 J4 m% m. v. D
9 @' ?3 c. q; u2 O 〈tr〉) \" W/ z) V# w! L# R
9 M. f: R- d. f) q3 } d 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉$ _: e+ K3 T4 s. a
) B" @0 m0 Z) ?
〈/td〉
3 @# a7 \6 E% z3 N3 | h8 P$ Q& U
/ X w1 q" A( v' N' { 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉1 H# y0 V. U4 P( |( r9 B4 e9 [
6 x# f/ ~( m$ p/ @& Z$ l 〈/td〉7 M; `8 {" v7 g' B9 C+ l
+ i0 y* g: _4 X; T1 j$ | 〈/tr〉
4 {# F1 f$ D/ L; \; M) p" l8 ~1 L$ M3 T; H& e! j5 P
〈tr〉
* b5 m' y$ M2 x. g6 y( K& ^% G
2 w# k* ~% G9 k 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉1 V& d8 X; D5 [3 |, f: Q
/ w1 r" C8 e) O) {7 h$ ^
〈/td〉
( D( O* Q- f* Y" W o* k
( [: B j4 t- G 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
* X+ L) Q( F5 t2 \) W. E/ U
! }+ L7 i% f5 ]* k* x# k, {, U k( a: l) K7 ]
〈/td〉
8 {! n; N" j" g2 c: }* {0 @1 W# H. d$ |9 l
〈/tr〉% u) n' J+ [% D$ z9 X$ {
8 W$ p0 s( s* Q4 O* d 〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|