|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ G+ h; U; c9 |# L
- i8 A2 u* T+ _# W& x# [1 a 谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。; h- K3 ?8 p, Z5 [& m
; N% G0 k+ b( @+ G6 Y4 r 如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：7 W) @. d6 _. O2 F6 n
9 R/ F j/ X9 n3 L' ?" k4 F: c 〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉7 r2 T7 \" U$ c. m$ Y
2 [' W' k: [" P* H. s* o
〈tr〉
/ N, v- F P2 c; u6 n- l# U5 {1 n8 j* M# ^( }' T
〈td〉
9 ?% U7 j3 s9 }4 c; W" z
d% c( v. p) W G6 M \9 [5 ` 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉0 ]& }* C' O' M
' Y5 f: @, i; a% v
〈tr〉8 I% [. P# I9 w5 X
$ ^; g- R0 _# K& c9 ]# l8 j' d 〈td〉' U8 A0 i n: t- D% n
" l, g+ [2 i$ K' k 〈/td〉
+ F# k3 z! l+ v) f, U3 z) W. ~
" v) a D. k0 Z& y7 F 〈/tr〉
/ U/ R& i4 J! I3 U( }, n7 h$ J6 o% b) X z/ O- Y* m6 X$ E
〈/table〉
7 N% ~# }3 H6 R9 L; Q" Y4 S4 n
$ K/ I ^) N; L5 T4 L 〈/td〉
# Y1 T4 ]) u# S7 B, ~* X2 V/ d) K4 r% {5 t# W7 I
〈/tr〉( Z9 |) W+ _# ?( J
! f, C; ?* \) B: N# \0 _, ] 〈/table〉
5 x, g" L" x4 a0 T$ l
* }# Y" ]4 G' l% r- R( c0 ` 第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
1 K- y: v4 Y$ N$ M. C( v! _1 w! J% b: y6 a3 c- g
源代码如下：
" B7 S, y% S N5 a2 d, U/ F, T6 F/ M* B L& |% B* V$ H
〈table border="0" bgcolor=white〉2 a% w0 z, Y# r- ^/ S
# F& [) G- E4 z- R4 N$ R! U
〈tr〉* U6 `7 L9 G$ @$ | ?# n% o
+ i n; ^+ V) A, O( t Z
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉( t9 G$ Z+ w9 z% n
! t% Y0 E( d. {7 E+ A 〈/td〉" x0 H8 m, c# Y/ F6 w4 @
# I. D, X( v* p' l
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
, ]8 f, m6 B F! e& }2 ^; [( |( Y
〈/td〉
- \$ @9 q, X' h$ d' ]/ i% h1 y% {/ J( P z! ]9 d( Z; v& f X, Q4 w
〈/tr〉( a0 \2 \1 u. s
n M# t" i j3 ]- D, l3 @ 〈tr〉
7 U2 q, O& G3 Q# d- Z: i! k5 a4 y' @+ ?% M$ Z
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
, `& n) ~8 Q8 N
3 _7 l3 R# w9 ]9 |7 k4 j; O 〈/td〉
8 |/ ^$ }% H; Y ]$ ^2 p* q9 O$ N, o6 C1 W* C
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
5 G' c; t6 a5 X# z$ j
9 R1 [6 z7 f0 h( w2 P1 ? m4 t- B% d; O
〈/td〉, g3 E: A: E# @( S) ?& U
* e6 T$ u* S: J4 M2 j" ^. t
〈/tr〉
- `/ a$ D" j1 b1 Y: v/ _2 `6 W# d1 u; Q3 e
〈/table〉 |
|
发表于 2008-1-19 22:20
| 