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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
$ y+ r' ]1 a- e. U( f* ]　　3 P- H+ w! B" }  v# I8 ?* i* K
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。5 P) i7 w) h6 S

" W- \8 k' Q7 |  D　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
- n! c3 A: b7 x# @& `6 E$ j
* e" x+ j5 ]% t- O' ~　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
* S/ M) `7 s5 J( n1 R5 `. [: p2 O5 g2 l; Q& t4 L4 g, v" `
　　 〈tr〉! n% `9 m* }# d! l2 ]) o4 d6 C
6 y8 T- |5 v2 H, i6 N
　　 〈td〉6 H+ k1 Y! x( A9 I
* \' j- ~, X& c, }% A
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉# _/ G) H* p! _6 n6 H: Z5 U
! n# P. k- A1 A8 y* S6 |0 f
　　 〈tr〉
5 _7 Q5 h9 V4 B: M7 d' V% @4 C6 H  f+ v; R8 h* q
　　 〈td〉/ T' w5 V+ H, w/ A
8 e9 q  l7 u5 H: J* D
　　 〈/td〉( ?8 j+ \2 s0 g
! ~8 K2 e5 N) K* w) U; H
　　 〈/tr〉* `6 s+ m% @( Q! F/ T( [2 R

4 q$ f* p0 \% j# `3 m; w+ Y　　 〈/table〉
! x6 [* P3 v- _! N+ A
3 X# j5 J! m' ?4 X; q; N　　 〈/td〉
  G8 t  Q8 N% w; x  ?
& M$ a9 w* f# c! b9 G　　 〈/tr〉- b% D% y2 Z) j) ^7 q0 m! D
6 o( L9 F/ a( L8 E! b4 V  s* `
　　 〈/table〉
6 S: X  n: u: N; ^, C' v/ W5 i# ?1 S; `( m% b1 Q7 L8 s
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
% L; c3 {( j' c! ^" i! a
2 ?8 s- R- h% L4 {　　源代码如下：
0 T# J+ Y% f4 i  {9 u' b8 x
. f! [& [0 S* q, j, E- t% ]# |　　〈table border="0" bgcolor=white〉, L3 r+ m: r% U, p5 K/ a4 a, l9 b

" P* W8 m  g' f, s( b) Q　　 〈tr〉6 V% z% L& ~; |1 e6 s7 Z

$ g7 M, y& J( h7 I　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
  \# H* a# y+ L; `  j. Y2 e
- X7 }# ]4 h9 `, e' e  X　　 〈/td〉
$ |& h8 U+ @, j& S; B: [
( G+ J) i5 A! H: w* w4 o9 M! {　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- X+ N$ g* V- q9 d
# g( H) l: Z" |; P$ W$ @# s# _) ?
　　 〈/td〉
. m9 @# p, W- M3 v5 ?& B! v  h. i
5 J, r" S+ B* c* v2 H　　 〈/tr〉* y$ s4 d3 ]* _: E
9 O; g0 h8 Y. O8 J8 Z, h
　　 〈tr〉+ \/ v. I. e) s4 ^  o$ R
5 c1 @! I& C: c; y- R: U: H8 n* _
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
- R% y+ D6 n# o
; i$ d9 U& Y& W6 s: U/ x4 V, o　　 〈/td〉2 I0 v) h; u6 V* ^4 P$ q

  C5 o' a9 Y1 {' j　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
3 c7 ~- s' u) b
6 Y% X' r' @1 Y. r  t* s1 j! ?8 r6 C* w+ D5 L* ^* m4 d( g; Q& Y
　　 〈/td〉
5 T# b. Y* o+ u  P1 {4 ~3 W8 P  z) X- H$ g' K6 Q6 [! D- M
　　 〈/tr〉0 C, \- s, N  Z. n! ?

+ o+ R6 u# L/ ]5 b+ X! M; c3 L　　〈/table〉

晴天再现

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