返回列表 发帖

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

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。& G, T9 Z) ?& J! ]0 g/ |
  ) ]# G% a& F) `* _) K1 K  G$ W
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。! g1 B  l; `! ~( ^& Y  \0 L. O
9 `% l7 R5 O. U% O
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:# B7 a9 f. i! R  \' A
" u. o0 z6 u& {
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
& O8 ^" }. W/ g3 j: Q
1 y. _" t( z0 H- u6 C! U) |   〈tr〉
* X5 j: h3 `( [& k: h( \
! x! M( ^, o" x  f3 T* Z+ Q0 t  Q" ^) I   〈td〉
% f7 u* p6 ?* U
7 B" G  S. ^0 z6 s$ R5 q   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
$ ?$ w: \  ?" j. f4 h: s0 R
0 g8 `% L( C, c" i( U8 `0 A$ ?   〈tr〉0 [. p! b  r0 p
: b0 \/ Y) ]5 Z* k) X! M& c% v
   〈td〉
6 }( |! D3 _! |" Q# ]+ s$ L' M$ S* m9 A5 W
   〈/td〉
, U  J# v! T! ^) O& Q+ O' n' |) D5 ^8 o7 Z7 P! y! h
   〈/tr〉
- T' G& e$ P9 i  W- A4 Y* G$ c: p2 G: B" X7 h2 ]; n
   〈/table〉
% W3 }) N& D/ j- m& ]: f4 o
) h4 f( Q7 Q$ k: m; L' I   〈/td〉
$ n: K0 d& X! Q; m! B9 ^: h" A6 G4 e, l  d
   〈/tr〉) Z+ i& `% d& N

" c. U: l, X, O7 Q5 X* X( f8 e+ V( W   〈/table〉  L) k5 L) N; y

3 q% C' q+ ~* F) y* R  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。) \' y/ w5 G0 E

2 N" y0 K2 ^7 ]% F% V  源代码如下:
- i  c- C7 k: o7 m* Y" H* ^, w$ K- s! [$ j$ J; Z, J. i+ v6 K. b; i8 `
  〈table border="0" bgcolor=white〉
4 `  E0 u. Z* W% A
, P$ O; U4 ?) c/ X3 r   〈tr〉
; u9 O4 D9 h' m' i, g0 B3 W  S- l9 `1 |7 `& u* g
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 z3 J$ s  h: o0 K% U  F( ?% I' }+ o! I# r
   〈/td〉) _" r6 S- q- N
  F4 t0 \& d8 `; h4 b4 K
   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉2 E5 X! U9 u8 A! H: V! H7 ~
4 O& l9 j8 u4 ?: {2 D; H$ E6 p
   〈/td〉
9 A* v2 J- }. L8 x$ z+ H8 j6 }2 o) M4 ~4 M
   〈/tr〉
( U1 H# ^2 V# Z, G5 ~4 ]# w# s  n' q$ B9 w4 I
   〈tr〉
1 a; I. A) D6 s* @% b2 n' I
* \4 j; a; F7 t2 I( i" O   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
! u' e0 m8 a" ?/ o
* H, |9 U. b6 A2 X$ v   〈/td〉
% f9 f( q5 x8 D
) z& [- i' b7 t2 _   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉  ?6 H( u8 t0 l! d' F4 T: ^

; W/ \2 h9 @7 d, n& |; i1 ?: e" E+ Z9 c; _' y- Y) u
   〈/td〉
5 |% H4 o6 p# a" {. c% h0 u, T/ z$ |" u1 C" G
   〈/tr〉
2 D0 U$ u. n4 P+ O& }% M
- Y  s( u% f! U7 u8 [  〈/table〉

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