返回列表 发帖

在网页中实现细线边框的两种方法

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
) y5 t5 c" x4 u/ k/ }$ e  
$ f+ |9 u9 G, I  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。4 J+ I- I9 ]- o5 [

) O/ s4 E9 N- }  a$ h( _  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:
) t9 |5 L+ S' c& ]; d" h4 @- a4 f0 D
5 ^5 _( G# P( e  ]/ V  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉, R: D" e) [/ N2 ~6 _. m$ ^2 S
6 Z2 r8 b! C$ a* E  s
   〈tr〉4 _7 |% A' r* s! \5 P

2 [; D9 N& q; E9 z7 [0 e) p9 D0 m   〈td〉6 P* I' o6 q& D. A5 [5 l

8 }1 t, Y1 z; V7 K; L# V1 H0 R7 A   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
+ K& W5 ]' z  D0 t' _6 A+ n5 d! D$ t% I' D; v
   〈tr〉6 Y# J0 F: B- P1 X0 T- M3 ?$ O
; j2 V4 `) R" w  i
   〈td〉( w# E7 o) _, `2 F5 L
7 g) o5 T: ]$ R$ h1 s
   〈/td〉
. Z' C( y, |* v2 i* F5 N; S
6 A5 b  V3 o& o  e3 F   〈/tr〉
+ R$ Q$ v0 @7 w# |9 e4 v# C
* g  {4 R+ ?# ]3 @   〈/table〉
1 w  u0 ?. u5 \7 C7 W3 B- |8 A: u+ R: d8 Q: N; f
   〈/td〉, N  E6 |. r) ]1 i( r
3 P) B, F; D% Z( W  `) o
   〈/tr〉% |$ y) e5 D% ]- t- ?! y

! U1 R9 r7 l4 m+ H* c/ H   〈/table〉
* t# G/ F7 L1 V1 N9 x8 l" o: H; R) x) Q' y" @- R
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
# ?! |( F& H: d% s
: N# F! M$ a3 f, e& g! K3 |  源代码如下:
1 d; _* Z! ?2 q/ G
' z# x. r( ?8 j5 d  〈table border="0" bgcolor=white〉
. r, s. J: i5 h6 S& z" r. _% f, z0 V3 L( U  G( |' y& s
   〈tr〉
) b* w  H+ d& D! g
9 [9 v* S. A$ h4 a1 r, g; j   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
* |0 I2 b* y" \7 s: ]# g( O* j
/ c+ _5 g+ F6 q/ ]5 C; @0 e# }7 u   〈/td〉
8 D5 Z& I  B  W) w9 [) a) Q- J" C! L
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉. W4 \4 ~" d+ Q! y% C
1 R/ K  o& h# m  J( G0 E% v
   〈/td〉+ ^7 @& A; |* q+ M1 \

! S# L& j' a/ W   〈/tr〉
9 Z: s( K1 R% I4 X, s! h- ~/ t) z+ W  `
   〈tr〉
9 D$ l0 C% W- D, d- z' z2 ?# J1 k9 P% l( I& D+ U
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& U+ e4 I" y/ Q0 W1 T2 K( i3 e/ I8 N0 U0 y  `1 u
   〈/td〉' `; q2 c- S6 @$ e5 z8 \/ S

' g3 e- [* _2 I# ^: C  U; A' H0 w7 H   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
  ]4 I# d; B5 U: a8 z- J$ L- f. h1 @& u( P: g% j

* Y/ ?. Z+ I5 @   〈/td〉
- Y7 K" E8 L- M$ }6 M" N( }$ R4 y  N! W& j
   〈/tr〉
; b) t8 O  W. W+ N7 \+ x* i
7 D8 l( ?. Y) X# `  〈/table〉

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

TOP

返回列表
【捌玖网络】已经运行: