标题: 在网页中实现细线边框的两种方法 [打印本页]

---

作者: admin    时间: 2008-1-19 22:20     标题: 在网页中实现细线边框的两种方法

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
8 X( v& I- Z2 |+ o5 H/ e9 Y　　/ p* |9 y% ]4 h5 L- _$ j0 C
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。- U$ U+ F7 n3 n  P
! p! W# R1 r/ X  S; v- _6 w9 ?
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
2 @2 U/ O3 X6 j1 J' P/ z) c# d& N' j2 p4 s, W; m
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉; S6 [2 R9 K: `1 q# u

% I3 z4 o8 ]( E# S　　 〈tr〉
. e8 ]* }* J. ]4 @# s( F* C* `4 |! H1 U' Z$ r2 ?
　　 〈td〉7 \' n* p" @  S6 y
8 ]2 }7 j% z; @* `
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
' D( [. L& l7 K% F$ M* ^0 t0 @1 N( K7 z
5 O' M5 `' j$ ]7 \　　 〈tr〉' l: j/ j6 c" u  S/ L6 U: J% S, R
' K% E# \* C4 o& Y
　　 〈td〉/ P4 }6 F6 W! o/ P: U5 P

! n/ L+ z9 ]& V/ ]" G: c　　 〈/td〉
& U# ?, P0 z( N1 y
7 C% C1 l8 l$ ]: ?; p8 W　　 〈/tr〉
6 [4 D  |5 i! C5 \+ n0 H3 L: L$ Y2 s4 A' q7 w" k
　　 〈/table〉
2 r# F3 k2 e( b% o0 [6 u
, _3 c& m4 L7 ], D　　 〈/td〉
8 q2 Y) K3 h, {2 D! o
" H$ R, t' o& o2 w  m- Q5 `　　 〈/tr〉" A. G7 g! h. b2 t7 L

* x* O  {0 I! z  K　　 〈/table〉
* |) `# m0 S1 F2 }2 i$ b- c* a- z& g! [: O" P
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
* M& a; x1 `8 Q: b+ H& J3 i0 x7 m5 y5 @  \+ _+ N
　　源代码如下：' A" k5 b' R& D5 O; m. K3 i

" s1 j. s* P  c9 Q　　〈table border="0" bgcolor=white〉
. b- x2 E# o/ O8 `' `5 c6 e: a) b( B- `, D+ @
　　 〈tr〉
* s* z" B4 P5 r% \
7 D3 J) j, o% g! ^　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉& q$ B, n' i+ H; S# t' k' P6 E

& n5 a6 k/ R- k, D, i: {/ L; i　　 〈/td〉
! @0 {+ J4 ^  j3 c
5 c+ T# a6 ?5 b6 ^　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
4 v, d4 o2 z' T' Z$ h" ~
$ c9 t$ Y, a' {3 G. s) i7 M2 o3 _　　 〈/td〉4 x# y& w4 S5 m' G! _: _3 X
, `! K, c- `* J  p0 D( q8 w
　　 〈/tr〉! M* s5 l8 G, l9 l+ o

+ @) A- h0 u7 {2 _& i" u6 B$ b　　 〈tr〉) H3 i" l6 X! Z7 E

/ h+ C2 v5 |" R' S　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉8 t3 P. g( i5 p$ Z: P

, [5 |" y2 Z1 M* G; A　　 〈/td〉
+ V/ B1 @) j3 B# r6 |
# o$ I7 I5 m( u3 T3 k　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
/ y8 L7 S6 E/ I
) q* h; j: C" @1 H
6 J1 z3 _' h" |4 t3 n　　 〈/td〉- [0 X# }$ {5 W6 q0 n' O  t) k& ]

$ H! m! M5 h0 A# o2 i5 j9 l3 ]　　 〈/tr〉
2 Y; F1 c! b, X# R9 a: n1 ~. b9 `
　　〈/table〉

---

作者: 晴天再现    时间: 2008-3-9 14:47

挺好的。。。。。。。。。。

---

欢迎光临 捌玖网络工作室 (http://89w.org/)

Powered by Discuz! 7.2