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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。6 L7 O# O3 ?8 D5 j
　　
9 S* p$ f& s+ Y/ t　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。5 l; r* d6 q9 R3 w

8 t! V4 f+ y7 v3 Z　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
  S# U% I* s" s' Z( Q1 S# o/ ~% \6 J' Y+ E
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" @( r* \% X' c. O/ J
3 ^$ V" }- }! @! |; t　　 〈tr〉5 Q: P3 K( g! z3 ?

9 x% K/ ?9 v% n, n2 {　　 〈td〉
+ a& D' o) @8 ^9 S' b4 L7 P' d. y: X0 M2 F. L
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉5 W: @! f0 M1 i! B: P

4 n, ~+ [. C* A2 W* A: Z9 F; \　　 〈tr〉: m0 K/ ~" }( S# A( Y( H

6 l1 _7 [1 v' z  g; C& i1 }　　 〈td〉
: \. |4 Q$ m% x+ o+ i5 H  O6 v6 F
　　 〈/td〉
) q# z  T8 [! V4 T0 E6 x) J& J1 z7 W7 C  D  H* u4 v
　　 〈/tr〉; `1 |) g7 P/ X

' r+ {7 |/ ?9 N" F　　 〈/table〉; y9 f/ R; |, p' d7 n

5 b7 m# ]- M: ?# E# R　　 〈/td〉
( x4 v: P9 d4 y+ t" [, D( \! d" z( R; ?; |# o% t, ~7 u
　　 〈/tr〉
% w  t  F% ]7 J3 q5 s, K2 K5 G$ M% @4 j+ r. k, w, `  V& }
　　 〈/table〉
. b+ \. X7 T8 y- ?4 L$ P# p
" o2 j1 m0 H& V# Y5 Z/ h　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
4 g4 B0 Q" \. _5 Y2 s
) |% B, a- w  O0 D  z2 E　　源代码如下：
- O  q( O& X# |; h  }  Y% J+ X5 O) F2 G6 a$ S/ c( S
　　〈table border="0" bgcolor=white〉
" s& b% A6 q3 d$ g' R$ T  y1 f) Z+ q8 {
　　 〈tr〉9 W- j6 N. G' c! F% d- _6 N1 v* g

3 A# B3 M6 i" C% z) Q0 ]3 X　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉4 `( a" }6 @- c: d* r5 m8 E

- ?6 ?. p2 V8 P+ k' A　　 〈/td〉' ]. W8 w# p6 J

3 a7 m$ g. F; U. \2 h0 [% ?& n　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉& ?/ z2 I" }" w, T2 |& N# j
2 u9 l4 S% u  g' k
　　 〈/td〉
$ ]1 B) o5 o2 x; M& W# P4 h- A) D3 z" R+ i+ f* V4 ?
　　 〈/tr〉
1 m# X7 k. I( t8 X) D3 P( c
8 G: U& J5 Z8 ]8 \3 {　　 〈tr〉
6 N' {' S; [3 }% }% |* @+ g
* v: u2 D& Q$ n/ c+ T" v4 w% y　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉! ~1 g4 I- d# N. ]1 k
6 c' m. R1 e2 q
　　 〈/td〉
* P) f* \* H4 X0 n( Z8 W: }2 L
* ]5 d% G$ @2 I4 y" b" i) w　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. j0 C& I% W) h$ m6 t! }2 Q* b3 c  t4 F) q  W

! A) m6 y1 _5 w3 O- t7 b8 {& _  u　　 〈/td〉1 z: z/ R% ~3 [4 J1 p4 f$ O

" N" [3 {+ P0 X  m5 N　　 〈/tr〉
6 C! \7 Y6 `2 I# A6 g. c* z
; u& `. H0 }" C　　〈/table〉

晴天再现

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