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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。6 X8 v* T, e1 ]: T% `- e' X
　　# x' i1 B. t6 }: m& Q+ j6 z: ~
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% i" y: u" O# Z+ `6 e9 Z1 X
6 P5 H- s2 S' @' q' F: |8 o
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：( ?) Z( T2 T+ _0 }, V3 Z1 {

" Y& |( k- Z) z1 x5 C- N7 {8 p/ G　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉# ]) z# A2 f# G( z: @; i
  L; o; u0 L$ |( m! X/ X* H  J
　　 〈tr〉2 w. K1 L) a" n$ l3 n6 Y0 S

( ^% R; y- S4 b3 a+ Y' ^+ l6 R" U　　 〈td〉
9 {/ Y( Y, V1 _2 i: o
% i% i4 s, H, W" m8 T& ]/ C　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
! v8 d# `" n/ X7 d  l1 l2 i# p7 g1 {; j
　　 〈tr〉' @- `7 Z- f. e' L& S7 Q

. W. j5 M' W3 g; \- M  a  Z/ ^2 S+ k　　 〈td〉2 o6 a2 e9 }$ `) c6 `# P. I

; ]% `5 S; c2 {: B　　 〈/td〉
1 M' N5 ?+ N' q& C- F+ b1 d# D( e" N7 B; r  t
　　 〈/tr〉; J$ S4 |6 P: a: T* K( R! L6 H
* A; x& n. N" y0 ^, F9 K/ i
　　 〈/table〉
6 U8 v& y- ^) R$ ^% |9 h1 I+ k: \( O/ h! ]* H
　　 〈/td〉; O0 a+ g. u6 x3 \! ~; I8 c
  k$ f. R1 ?0 E( M. F5 N
　　 〈/tr〉. D; P! @$ S) y, Z
: K7 d# |0 \6 N9 d' P
　　 〈/table〉: ^. Q) K$ h# S! O
4 K# S( _4 ?) l8 y) L: D8 K% B
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。: ?  ~- ~- |2 O: z4 i( K/ O8 U
/ {  x; T' f0 {4 X/ V% v4 ~+ a. {
　　源代码如下：
) K/ Z4 l3 ^2 s2 U/ W% D+ z
: R8 Y( [: z1 D( u　　〈table border="0" bgcolor=white〉
8 S6 z2 m. Y: [  |* r. F4 d2 V
$ f: Z: p* E8 F7 ^" o! ^; q　　 〈tr〉: j( H" L/ `7 Q' |; x, K1 i
. `* f- W$ @5 F2 e* [* [7 I
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
, z! s( {* |. D. Q5 {
, r3 V+ ~, [% H& Y4 w　　 〈/td〉
$ s' ^  N- p6 V! Y, x6 d$ ^6 ~3 e" X" N( z8 F9 z' }$ ~
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
  T; w+ k; m! M$ y% n# A6 ?0 ~
/ l: }, I& e/ M% }* H. p　　 〈/td〉
) ~( }5 r+ z6 t& f( v& ^% u$ b8 n
　　 〈/tr〉
, j9 `0 b% ]8 G
& f4 g* `" Z# ]9 l8 _8 a, S　　 〈tr〉
3 d$ B* U3 M( Y+ A
1 o) _# \" B# m5 X  Z　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
8 O5 s7 t! m* ~! T* ~
6 |4 e; m& I: I9 [　　 〈/td〉
# `5 {2 e$ @! d7 h) h9 k" A! K3 z* R
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉: b6 M, A! t5 o, H. t
- G( i; v$ M6 h# q5 |8 [

' d7 e1 R4 U0 M% r/ o, N　　 〈/td〉
" _7 _2 H1 Y, \7 l& c
4 A0 G' h- j5 M# {+ _: |0 C　　 〈/tr〉  Q! h- F; j% _; M6 l; f
* u. J  d/ F  x
　　〈/table〉

晴天再现

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