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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ G  K$ ~, y- N- B& f　　+ W  v$ q" [0 I. I
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
* d1 k1 T5 I. E& o$ F
4 K* h$ c1 |6 `/ o; Y' [" O" y　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
6 X% @' g) l2 \- @" O
3 X1 T# U5 x% \+ Y5 o! k　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
% V1 X& b, ^. d* ~5 w6 h
$ x( o' e6 A2 e$ x- E　　 〈tr〉! s+ I( N3 ~$ `8 D1 Q

0 t0 i3 Q8 c. k, w0 f/ z) r* y　　 〈td〉
  l6 h0 g' y9 t* p
  F* W9 C0 A# m  D7 h8 J% P# o　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉, Z. s! q' l; C- `1 E2 I9 T0 p
& ]+ f6 R% Z* e/ |3 E" b/ b
　　 〈tr〉
6 Z" A# u" ]8 \  r! i$ j+ q
' z# @/ ~' S/ r1 {1 c) `$ G. E　　 〈td〉9 ~4 }1 T4 L2 n6 q8 b* c. _

! h+ Q3 F; _4 l+ }　　 〈/td〉
. a% w( a, w+ q' J, v
% ]' ~( n+ N- c! R$ T: d/ o　　 〈/tr〉0 O- \9 J! G' C- o% ^( [) T: ^4 _- e
% W8 b9 e! p4 q/ m0 k$ n
　　 〈/table〉
( c" x( [) G* A' X6 u. g% l; c) s4 ~
　　 〈/td〉) x) _5 C! h; V. M! q- n
! A2 }. t; R% O. C0 L  _' F. e
　　 〈/tr〉
: v2 o! c' a2 G+ @  ?' c5 i; @
8 E3 S0 p/ I* A7 b; k* [2 `' M9 H" k　　 〈/table〉
6 Y9 o: _8 O# P( ]2 E0 r
2 D5 t& ~6 v' Q) P( }* Q- x, p1 Q　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。& Q. o+ {+ g; h; [; i3 {
" \" j+ N8 J8 t8 e4 y7 V' a
　　源代码如下：% Y4 M) N' d4 q# @( P
" h# \% U4 E1 s: X
　　〈table border="0" bgcolor=white〉& ~4 ?# S  ~. F* W* g; N* y2 X

! _6 @9 n+ C" d; f" l% U　　 〈tr〉" a+ t6 _5 ]3 G: e! B+ y2 i& @
3 B' }# V. e- Y$ z) S
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉- Y( y) `1 I/ M: K$ @8 _+ e$ K0 ^
( t* v7 }& Q7 ~" _
　　 〈/td〉
3 g& e7 U) k  S3 o  F8 O) i% [0 A5 k) F& W" B5 ^" o+ {
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
& ]# _; P6 L; F7 A/ t, h
6 n% W) I8 ?2 ^; i. {/ ^- f　　 〈/td〉
5 q% \- k/ g3 R$ d% B2 H5 p5 v6 e& B- k  W( r
　　 〈/tr〉7 H. L8 Q0 [# x5 x( V
: D/ \/ Q( s7 |, [. @# l  K# t0 j
　　 〈tr〉/ ]* }7 L: M: ]
) |1 J) h7 N6 @  K+ j
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉9 y: s  {! J& W* H& s

" k3 y2 {* l! F$ h9 C　　 〈/td〉
5 i" q( @. e# P8 ~; {
. @3 T- |3 Y1 k7 F5 ]　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
9 C6 I) Q% z% S0 f0 B3 c, G1 v" _8 w+ C6 L7 C  P/ `3 E
  \0 l- n5 Z9 M+ c: ]. [. L  j
　　 〈/td〉% _  `) z  T6 f- t3 [7 P
- `( Y& A4 ?( R& C
　　 〈/tr〉
( U# p$ E, s0 I: [3 A
7 ]) \7 Q2 |9 q, {4 i5 O& N7 c　　〈/table〉

晴天再现

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