获得本站免费赞助空间请点这里
返回列表 发帖

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

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。, M( j6 j' k+ H3 `- V
  
: T) [8 H7 O8 v5 s6 x. [( k- C  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。
0 @1 u7 L) g( b( z; b/ {; o+ |- i6 H; h  G. O4 Q% _
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:
4 \8 s4 u5 ?/ e! O: ]; k* ^1 {% V! D
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
% R- [. S+ ]9 K5 H. u* C( f
/ n! \6 _. E8 u. X   〈tr〉+ b& h9 {/ d/ a" S1 y/ ~, `# f: @' W
) I- W/ W6 {: N# I( s% W
   〈td〉
5 B1 ^1 d& i5 p( h7 u! y' u4 x. M
4 q: o8 g: F8 |* Y) ]   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
: l& G. P7 A& [7 F1 s5 U1 D, t0 @; U) m1 b( A2 R
   〈tr〉
$ F+ t, D* S+ y8 `0 h
9 c3 c2 l9 z! {& \$ E   〈td〉( G$ b) [* u! m1 l
9 F6 O! L: s7 H
   〈/td〉1 X8 u3 N" D8 H8 L0 ]6 _
1 S% {6 ?$ Y1 t& C- y' H' ]
   〈/tr〉( n; B  J; K- F0 r5 P( G+ g
2 D5 D$ B  K; ^6 U' M
   〈/table〉; g/ X0 U+ \+ K7 l# ~  j7 L; c

3 T5 ], ^8 o3 Z# F$ N   〈/td〉
: L/ Y$ q1 I( ~/ Z* B
' A! c+ g/ \& k' P0 o! [   〈/tr〉) g9 H5 p( A  ^
1 J- V: W/ D& w# U5 W9 j
   〈/table〉
0 R2 c  x% G5 F4 F/ }5 u+ u5 t: g2 I& s: s1 d; o
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( B$ x' Z7 Y9 q3 Z8 p
2 g8 {* T) c; P9 S: w: g
  源代码如下:/ G( U7 O8 V. q( \" c7 K( {
' W' f0 q; b/ N" b9 Q. G" ]
  〈table border="0" bgcolor=white〉. m0 r0 K$ m5 l
, `3 N- I/ y! z7 \+ p# d; r
   〈tr〉
/ H- R( [( \3 s6 \$ q0 H1 N
9 r, c# I9 m" j' P6 @# l   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉* C9 h2 Q8 L6 [0 \& d/ m- B+ {1 v

8 M/ ?. P5 n  N/ ^! C' ?6 X1 n   〈/td〉. I# B* g0 z4 W

; v5 O& v+ B- Y# _. z! y   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
2 A) ?" }. a+ Q, O# v. L- I" u. ~9 {, L+ H" e' J, n- `6 c
   〈/td〉
% \! t& @2 Q( Z( Z/ c
- L8 _1 x: V0 l9 u4 q   〈/tr〉
( h" a6 u5 F+ v* x; r9 `/ {3 ?0 g! k2 }7 N) i) O
   〈tr〉$ _/ |+ R: J9 C* B/ `

8 F/ w9 X! j4 |! V4 i: k8 a   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉- l3 {- t+ g8 j; K+ y$ l* t+ @5 z8 H3 \

* M  N) z& p+ N2 L   〈/td〉
( a& m" g1 u5 U$ Y) n7 h7 E
. a! G) }- `8 ~$ X9 F6 |   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉' h) C6 B' b5 B
" X0 {; \  _; O% I$ c! o. X- z' ?
0 m% d( v' A: Y, B6 a1 C: K
   〈/td〉$ l% t. {+ m% U3 H$ ^" E

& }/ R& y# f# f   〈/tr〉: [2 q" L3 y0 q) s
6 {3 h) p9 P$ N9 t9 B2 x0 H1 u
  〈/table〉

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

TOP

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