|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。) U4 f! W* [+ p% p& F' o
6 D7 P8 D, U0 M# b1 ~! |" g5 o
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。" q3 G, Q# ?" w9 G, s8 y8 d1 R, ?
( u8 _! f+ i! J8 s1 J; m
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：1 N# s: J2 o7 u6 P: o$ [
% X$ n: I; i1 @ 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉# P6 r( n6 X& U q0 ^% e
+ l5 Q* m6 I9 C1 D
〈tr〉
5 _: Q5 ]. `1 j! F$ f! H; O) C+ k3 b8 d9 @; \/ C
〈td〉
b( C Q( [5 N4 y1 Q/ s
! Z0 Q5 @2 W1 ^4 ^ 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉/ p/ ~& d: a; B: e4 w6 \
4 I6 i+ \( m1 k; r; l: W' ` 〈tr〉
4 b; s: [: H4 G7 v* X, e: ?6 K+ N2 d& h' B+ b W
〈td〉2 c/ o7 `+ `; I1 |9 H
6 b$ z6 W. K! t 〈/td〉, l/ y+ ?& x; z5 N3 B5 I0 ?
- Z. A& V6 J. }- [: m9 W 〈/tr〉9 s6 _5 l5 t9 F. F& k) b; Z+ y
3 {7 t6 S E" s$ @
〈/table〉
* E4 v( R8 ?( m7 J; u& J# [; k; G5 }7 m: o1 W
〈/td〉
4 S$ x* ]0 P1 T
; T j# e [- J+ _$ J( d 〈/tr〉' \* v' h$ D0 j A! s0 ~! v
8 I% Y+ [+ o0 H& R 〈/table〉: Y) w+ T2 {) g: m: P P
8 V- d! S8 S8 J7 A b 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
5 t; a7 K5 D2 j* j p! X$ B" T! `5 R X5 a3 V9 x5 \2 Z
源代码如下：
1 S9 O. Y6 j- X- R* r& n$ M4 a- D- e& C! A* f# ?
〈table border="0" bgcolor=white〉+ j" J5 w$ T: r5 x) X3 ]
, |8 Y2 {8 h r
〈tr〉- `- v- J" g- h% y! ^4 N& g
% @9 Q% h$ ?! f6 z) ?
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
9 r, Z( _2 F$ t' K6 e p0 G/ x3 e! p! s% ^" i
〈/td〉
) z8 l( I8 D, y2 V0 N. S! I4 T+ R
% Z( e5 u9 j4 L2 a( f 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
4 A, `7 z* i& \" I
A; u* A0 J2 P+ ]" z 〈/td〉
5 Q4 k4 X$ y/ ]+ G$ I- _8 k* b2 v) v9 [; P$ O& p
〈/tr〉
5 A; n# \6 t3 z* q$ c! y/ H0 m; M
) {" T! S7 I5 Y7 D# o6 l 〈tr〉4 P5 [% m6 q/ Y$ {; A- U& [9 p
$ B6 J( D" R) B6 C' H, Z 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉. a! o. P0 [( Z/ S
6 f- q9 f, X0 x3 P \" E/ }7 J
〈/td〉
+ S0 k* S8 G- S# ~) n. f& r
3 k! [1 ^8 K6 [% G: z( | 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉$ H5 @! M. w& m. z" W% E- ~# @" J9 q
- N( |" G2 `. F' E3 S& X- _5 ~
( x% `0 l7 u4 a3 L 〈/td〉% @& ~* a# V8 T" ~4 _% {1 U
/ G- a( W# |( {) ]7 z4 s% Q( T
〈/tr〉
: {2 i8 U/ [% ?) V1 X, S8 N! p+ {- L2 T, d3 e6 ?5 P
〈/table〉 |
|
发表于 2008-1-19 22:20
| 
发表于 2008-3-9 14:47
|