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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
8 C0 }4 G3 f5 W6 U3 F  {　　& M! v" O1 {+ p. B
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
9 @! N+ I( n% ?7 |0 f! z+ V: |1 U: X# X7 g6 }3 T5 R" |
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：' [: q) e3 m7 ]

* Q  g6 R9 r. ^0 o$ I, w　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉5 M3 Y: y: X4 U
# ], p$ x: I# n* x. L2 x- U
　　 〈tr〉3 ~" _+ b1 @* X$ c( i! D9 X! D
/ ~' S7 H4 @1 y: @) H
　　 〈td〉. P) R  c; m. ?9 Q# U% j  O
5 c" q0 x1 l/ G! p! d# _' X
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- |  s. {6 P/ M; ?* f, C: l: Q" u
; Q4 R! a" a  B3 u
　　 〈tr〉9 A- k7 B$ c( L; ?2 O  s6 _/ R' w9 Y  I
9 g( W" ~  X, g, `  m4 @' P
　　 〈td〉
6 I! H: Y7 Z8 _* l3 O4 {8 \6 f* A4 y: u/ L5 _: o& j. H# F
　　 〈/td〉9 x! Y( H" ]& W4 t* o* T

0 G8 W6 G4 s& N4 F+ P" N　　 〈/tr〉
; m* b- T; a1 v5 V
7 `' @8 J% I& p) @  B: H! b4 o: y　　 〈/table〉2 d9 R1 x% H3 p7 D+ q7 ~7 Y
% J9 A$ t" g( s3 m. Y
　　 〈/td〉
7 m4 s) Z( \) \8 n4 c3 |( C# J/ K* d5 {# [* Y2 q8 V" P
　　 〈/tr〉
6 z" X/ ?, X" `* _
- f7 Q* A# t% @3 z# M8 q! i' q　　 〈/table〉5 a$ ?- m$ K, }- v
, h( y1 d2 L$ W8 M  m
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。% Y! j5 E) x# i1 w5 }# H$ ~6 E

6 ]* H4 d5 @7 g' K; R+ }9 i　　源代码如下：6 T) n2 w  j" o# t5 `* \( V
) d* z4 ~2 a& t2 a1 j
　　〈table border="0" bgcolor=white〉, H0 E% N% q2 M

+ c5 r8 E( S$ y  C　　 〈tr〉
9 v) P; r3 A/ `7 N/ ?: p* r* N" X" ^4 V/ g1 ?. a
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 x3 d; I3 C, g6 w9 r' n% ~  ]7 \
, c1 A" T  x! m# e6 c　　 〈/td〉
; S2 y6 O: N  G7 W. W$ B" Q
, F% J! {/ y& ]1 \- _) y8 _　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
6 p& j0 T" y+ d  S+ a4 n1 O+ f4 E6 V2 d! R' E
　　 〈/td〉
3 ?2 n0 u& c$ \8 p# ?2 E& L# {3 d) i* e+ R
　　 〈/tr〉
2 N# Q# @' ?7 P' f
" g" t' q+ \$ K9 _　　 〈tr〉0 _+ v( b' m; y- v3 W) e* `# U. [6 n

4 w" M: B& e5 z　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: x. S$ h# _- L5 a- o; q
9 E- ]7 m" ]/ y. x　　 〈/td〉% M/ a  F- s; L/ U0 B+ ?& ^

5 K0 }" k# l4 |　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉. y2 q4 u; G* h
: U0 C, R4 O- a1 x* X0 o# Z; G
# @; o8 {/ c$ l) @/ q3 p
　　 〈/td〉8 A' ^0 B! v- K7 [
) E# ^6 `5 n0 I1 R. j6 b2 x
　　 〈/tr〉
5 j' k; Z( ~% R# w7 j# j' c" s
+ b* o% f3 v, S' R' A　　〈/table〉

晴天再现

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