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

---

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

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。) Z9 k5 B+ I2 `# T$ A0 o
　　+ d3 v# Y5 |! a% ^7 a: a. n
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
: U9 J# J% Z  [: T" T
" M; o& z# N! n3 I　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：  w0 c+ h# X- g" q: h

. O  L) K- P1 V* u' v　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
+ H+ C  p8 [+ z+ C% Q
# `4 g% `" P4 `- }* q7 j8 Y) C0 c　　 〈tr〉+ R" ?7 F- r% L, e" A# `
3 c% k0 C4 n4 D# L: p( W
　　 〈td〉/ b5 k5 }" L. @
" q8 B9 X( u0 k1 w9 B
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉" p8 m2 ?( Z1 Y; V0 ]" _5 f0 C5 T
! `' o6 B" l( D+ U: G8 Z; K- l$ q
　　 〈tr〉
7 O7 d' k- k1 E( N  \# Q5 n  \4 [: Y0 S7 @9 R% G! J" f
　　 〈td〉
' Q" I/ H9 I7 v( {% ^2 f. X
6 Q! X  @6 O& X& P# j& T6 K0 a# o　　 〈/td〉
& h' W' z' |# h  ]8 ~, ^' X  c4 y
　　 〈/tr〉  B( f( L+ u7 c' _4 r2 k

3 y8 q; F$ o# A3 z　　 〈/table〉
  j8 j  s3 d6 ~5 F2 h1 C2 Y$ Z; H1 q: i! C+ ?1 z9 w
　　 〈/td〉
3 q: l$ ?9 S( Q, }. V& C# l& Z9 g- U; q) j" d0 i1 I: R
　　 〈/tr〉
$ j9 F- j' [0 A% N
9 z! l% f- G' u0 u7 Q) ]# r; m1 }　　 〈/table〉; Y" ]+ o3 }# @8 V

" w& a1 ^- y: }) J) G　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
9 p$ j4 `5 o- {" ~) l% W7 }3 r) i- l
  t( T/ K) b, A$ W　　源代码如下：7 {8 p" l! j0 T7 i4 W3 W4 p

6 V1 ~9 K. c% x0 A2 g& S　　〈table border="0" bgcolor=white〉. X* c* X6 r0 H. j9 K" O

( z. ~0 Y; Q6 X1 Q, s2 }　　 〈tr〉8 l. {# O8 n. G1 a# L- E! G
: \" f/ f. \- p; Q
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉, j: A5 T/ k- v6 |0 D9 O5 I, x' k

* x9 u" v; J3 ]3 s/ ?; }! n　　 〈/td〉
( {& ]+ X) j! V6 R4 l
/ @4 m7 \3 u8 y, s2 L1 L6 D& @　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
/ H2 _( }5 R1 n' Q% z7 L% H4 V
# q3 K+ y9 H, d3 |# W4 Q% [　　 〈/td〉' O: J2 f0 K7 W3 I' o+ c$ m
3 f7 F+ E: V$ g- h4 J( Q+ u" b& T8 T
　　 〈/tr〉
, Z1 V' v/ ~( `" |2 c" C
) v' A- V3 U0 _& M8 q% |　　 〈tr〉8 j6 r& C: P9 J' h

! F7 y2 ~! U$ @% `) u5 f8 Z9 q　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉% R" {9 A% C" ^( J9 S
' I1 c8 ?; b$ [' Z3 x
　　 〈/td〉
2 y6 m9 N$ n( n# z& t6 A+ U+ C* }! g( z# G
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉: r$ o; S+ O2 Q
8 [' `' g; L) t: q- ~- Y' `1 C
- U' i3 k9 R4 l; ], p2 ?/ F
　　 〈/td〉- }2 D+ R# k$ [& Q

% V' `, b! v1 y, E　　 〈/tr〉/ y$ y* F" K6 E; M" E/ M) R

2 E* x5 I: R) K　　〈/table〉

---

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

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

---

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

Powered by Discuz! 7.2