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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
9 ]  ?! K; v% f8 R$ @　　# v/ H0 R: m! B1 i- V
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。5 J9 I  i/ n8 y1 Q. r
1 O' K  [; ^& }3 ?. X
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：! k6 ?9 O" K+ H  R! }" A

! V' R' Q0 D9 ~+ M　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 E4 ^: F) E7 T; F: x  Z$ ]" [/ O+ u- N4 y( W# P
　　 〈tr〉( @3 o' H: y0 F, g  X4 ]1 }
$ x- l5 P  W/ E
　　 〈td〉0 F7 ~  J% z; w( T2 N& W

; [1 x/ d( I. `" C+ ^, L2 S　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
1 w$ [& M! Y/ N& ]' @' l! J6 x* r: Y
  a. e: K( J0 {　　 〈tr〉
2 ?, D& Q( s: i: x- @
% ]3 f9 `7 D  a3 W$ S8 K& [　　 〈td〉. _6 b8 G- `3 v4 i* U2 d3 T
" A6 T* N1 k: k; E+ Q) t4 m
　　 〈/td〉0 u5 n8 z1 f; y

) `3 `$ K$ c: F8 ^; L　　 〈/tr〉
1 e9 ]  p8 M9 t9 j/ U) w$ L8 Q, Y% @7 C3 e$ @
　　 〈/table〉
$ J; {" S8 l! g% O0 G8 _9 ^  R9 C2 l
　　 〈/td〉
, x5 A' d4 {5 Q" k$ W# @8 R6 G; K6 j" U/ M' c1 j
　　 〈/tr〉  `+ [, v. o+ O' X
% w! i) F" U8 U5 I( i1 M: P
　　 〈/table〉
* j' r$ R) E3 ?
9 c/ |0 K& N  I9 _' n　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。8 j* q* B$ F) o. Z

7 t/ j- ^1 B# @& d8 ?　　源代码如下：7 m: S# r1 k3 f8 d4 J% r+ \

  F* ~7 Y& l" w+ V' m. ?　　〈table border="0" bgcolor=white〉
& E/ l# a! X$ p$ E1 @# D9 r- [' B- Z
　　 〈tr〉
1 n3 r. R; p9 i- t7 s' @$ m5 W
5 y) g) k: Y7 _+ T　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ h) s) G$ r$ g8 n# f6 q7 [' V, U' |! `5 ?: R# }" Z  c; u, S
　　 〈/td〉  h- Y, V2 _9 ~; r( d

- S1 {- v4 X3 T1 }; H- e　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
! m/ j+ `- P; E# L
: g2 O4 g$ A1 p# E9 M+ f3 @　　 〈/td〉$ U2 v. C. O0 d' B/ z
+ K" P% j  \' h# ^9 I' n7 [
　　 〈/tr〉# V$ r* L1 r* E( ~
9 s+ i  x0 x$ v' V" N& m
　　 〈tr〉" U* }. |# |( O+ [5 I8 V- g

' ]0 g, ~1 M9 Z1 p0 B- p- m9 m6 R　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
1 G# [+ X. `4 R5 C8 I; ?: w  M4 \% ^0 `2 m3 F7 B
　　 〈/td〉0 Z5 a" ^* s+ u! r0 P
3 _% Y& I( w: S1 e
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
3 b* I2 s  V1 D) `) {8 T  ?8 R
7 a& z/ \8 C* F+ n, p2 }. ^+ Q  M- G, E) f, n) @" I3 k
　　 〈/td〉  z3 U* R+ u5 K+ z) W
) u. E  o0 e2 ]) j; i7 o1 D
　　 〈/tr〉
  O, \5 b" A" v( V/ x  l# F5 ^! C8 Q8 K, @5 ^7 k+ o- b
　　〈/table〉

晴天再现

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