在网页中实现细线边框的两种方法 页面美化, 边框

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。  N' q! C2 F$ G% y6 X7 ~( m
　　
7 V# W$ v4 D9 Q) m. O* X　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
, Q$ i6 w- [( Y2 E. Z
7 G3 w- j) A7 A. M- V, E) B　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 s8 R" s  ^9 g7 E0 W9 E
/ L# J$ V& X" e- M3 r& w
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
* C" O8 M- s) Z/ C( e  d: k- v; |$ W# E) n$ ]
　　 〈tr〉
, ]8 ]' S9 F5 {5 {5 B% ^8 t5 S  O4 a* b: J+ {
　　 〈td〉/ [% {. H& o4 a( L5 f  u

; s/ D5 N4 @3 C% w　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
" `/ M" u5 @; Z3 S# A: u* P
7 F- D0 Y- y( [　　 〈tr〉
% G5 a9 ^2 b5 H4 a3 j& _5 ~2 T% j% u+ _# h) t7 C; k
　　 〈td〉
7 A$ T) i" y/ M$ n8 x* _+ H1 G2 R
) A; w. c; e0 \2 ^& d  Z　　 〈/td〉- w- c0 ]" s2 E" K- @+ E
" h- X" u6 b9 {, ?4 f* F  t8 ~
　　 〈/tr〉
. P# @& B" s+ ?4 x( _& n- ], w% x% N& |8 I
　　 〈/table〉
* a: ^' h# K" D8 N! p  W
0 h  }4 T, l# Y　　 〈/td〉
, `+ ~3 F0 d' y2 b  {/ t" S6 }
" y* ?" ^& W0 S, B　　 〈/tr〉  Z2 u$ n# J( t; a

# ~: A3 g0 u5 o　　 〈/table〉
  G, r0 [: @% H# P2 Q2 i) B
! Z/ P4 |$ o; T　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。3 o( l, ^+ e" x% k" O7 s- v, _
% A, u3 j" o  ?: Z' D1 G- D
　　源代码如下：
: s) d$ v/ Y+ A2 V; ]8 q% n
. R8 Z/ o6 X- S5 r' f　　〈table border="0" bgcolor=white〉
  h; N, n+ H! @8 t& Y
, w, [" N0 N, q; ]% v8 N2 V- P　　 〈tr〉
: @$ _1 i! p5 p( Y* M
; m* N- g& P7 s* B　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
  A0 V0 A, O1 X$ W. f; F- g
1 O  p& r% ^2 S8 C1 F. W　　 〈/td〉
$ M7 @$ E: u3 T# ^. X4 F  G
3 M9 w+ l" d9 Z( r% w, ^( E: d; F　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: x# H; [1 O9 Z) Q& d1 H6 Y0 h
- `2 z  V# `- i# Y2 D　　 〈/td〉
3 c! V/ \- u. J- q9 J5 P) r5 {3 l- Z- i" n% ^( V( U
　　 〈/tr〉. z: y. E6 L- h, K6 n0 o
- t3 w; m+ F8 f$ G- K0 T
　　 〈tr〉- Z, \5 K2 z" j1 ~/ {1 c4 f. B6 x
0 \% E1 Z( @2 }# ]! V) \. k: G) V
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉$ |& D6 m. Z) E) W
" s( m) U& J. I  G6 G
　　 〈/td〉
$ u2 ^: ~. m5 J, B& v* L) }- P. G6 E1 d! B. L: k+ S
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
% p; K: X* E4 i! p9 O8 A5 f
; D- L# E$ W: L5 n1 o1 K. E, I- g: b( N$ ^/ T
　　 〈/td〉( w# ?, t& q: N$ z9 z# a
6 n1 L8 V( q: f! k8 h
　　 〈/tr〉
3 Q9 [! Q& I, F3 l9 C- K0 ?
- p3 ]1 w, Z- F/ p& H+ D+ m6 b　　〈/table〉

晴天再现

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