返回列表 发帖

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

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。5 i( \2 v' M( x9 b/ o2 x0 S
  - B4 {& `7 Y2 P- K% @% k+ Y5 B
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。
5 ]8 k7 D, D* `  i
$ f+ v6 P6 ?# @) }) c& V  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:' z1 b4 ~. a. g

( f1 C. w( R, [* p7 P  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉6 m0 v: I1 }& F& D2 A

( x* Q5 }+ R7 s' \: O0 `- Q6 o   〈tr〉
& Z1 R3 A) `  Y. _7 Y. A
8 C8 @) H( ?) ?   〈td〉
* A& F" g( c& r- w# m* y% G. Z% Z# N6 X5 `9 L. Q& j
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉1 |3 D) W* Z* O0 M6 F( q/ I! `

7 c- N9 p6 B- U/ R   〈tr〉+ r5 u5 U( ^; x) b$ T

) ~+ |6 k. G" X+ _   〈td〉$ C& C* c+ M/ Z" e& S

- J" f1 [% _$ t2 S# h9 q6 M   〈/td〉1 i- ~( r4 I6 ?* W
% J9 k% n" [7 I- Y: C
   〈/tr〉
( x1 t: d+ D5 c  R6 x0 D/ C% K2 N
& `+ ^2 A  f3 @# q. a( e7 Y   〈/table〉
5 y, h$ Z8 e8 E# V: d. t! w1 d! j3 k, m7 d6 j9 t
   〈/td〉$ M" J) v2 r- Y7 U: s! v+ F
3 D8 ~- P+ k; [$ [. S; {
   〈/tr〉
4 u& s0 j/ ]  r, }6 c( {2 a8 \) a
   〈/table〉
9 z* K# r2 o; Q: @0 x6 t" n* b$ |# G7 W2 e: j
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  N& h: ^9 c! D
' v. ]$ {& k3 A; ~
  源代码如下:
4 z' o" C2 c& h# _, Z
1 A& N5 G5 @6 P' N& Z) J6 R  〈table border="0" bgcolor=white〉
: N7 R& m; f8 O# L, |, f) j& \, C
   〈tr〉5 i- G, c0 \2 V8 R$ ?; M, @# _

' |1 G% X9 h( I   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉" h9 P& v' t4 w& R4 j1 w* \
+ y) I( I. q6 ~. e! C/ _$ q) s
   〈/td〉% B3 }1 E' T: B  g! c* C& C, {
5 L( W* y; `7 ]3 H+ k9 C1 _
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- q0 W' Y7 i* ^8 K: ^! l

2 A, v  j" L. o! Y2 `5 m; l( W. e0 z   〈/td〉8 u* ~  y  a8 }  A/ h& Z6 h
1 N4 n3 y, }) h& b5 k" F
   〈/tr〉# i: v! y  J& A! T4 X( |
3 R' Q% R9 W/ _# u7 `$ Y, f
   〈tr〉
( v1 B# d* R8 L+ \5 L1 A0 w1 K$ l1 R1 Y& R& m
   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉& @0 A% |. [8 [( |8 A* e% w

0 a, j7 m! m$ m   〈/td〉
) o0 A, T/ F; q6 {- z' Q! L) O6 D5 Z7 T; R, p; j- M
   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
- J3 L' E7 {! z- h9 B; c: B9 Z9 d& ?! j! O% J) }. x& P5 w0 z  U

- y- Q3 e7 S" F% {( X6 P3 s   〈/td〉) z( ]' B, P4 M3 ?

( B2 g( l! ~. w6 c" {% g! D   〈/tr〉
! K8 U/ w* x: `' _" b
' q+ N+ F8 g6 k  〈/table〉

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

TOP

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