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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。6 J7 j/ \1 Y- N
　　
, Y& @, u) E% U2 x: U/ |- b　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
7 g! u0 [8 y  T& ]- R0 X2 _3 o! K$ [% S7 q/ z8 K
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
& f& D  o5 o" Q) e$ T( o6 x+ m% U1 ]* v# ~3 ]& X$ i) a$ X8 U
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
5 R% x0 m! j0 T! B* X0 v' l" q- y9 P' u5 y
　　 〈tr〉
2 Q9 A) A+ K  R, |* r; y# c
6 z* r' X3 l$ B5 w3 G( b　　 〈td〉& z7 U  U2 [* ?5 ?) S# c
( P4 m5 k# K1 g" {7 T" I4 L
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉6 Y* P3 s, r5 E. X

/ e( k9 E7 k2 R　　 〈tr〉
' j" e0 [& l) \* o; l) j; P& c. p; s# P1 O; E0 G  ]2 z9 s. @
　　 〈td〉
2 r  f1 X% A; A( d7 t4 g9 ~& x+ W# m3 H4 X* f7 B
　　 〈/td〉5 [7 \$ z0 \' c' I

  r! ^7 Z1 A- x- b/ q　　 〈/tr〉- l# g7 b' X) F
0 G4 h2 E3 ?: Y/ k7 Q- {, M
　　 〈/table〉
6 j7 k4 n& h/ l; h
4 q. v3 o' o+ O+ G- j　　 〈/td〉) W7 W( w1 _- O( Z# b/ L$ m
0 @6 Z. F! o. T* r
　　 〈/tr〉
  `4 ?+ W3 m" {; P- S7 Q/ t/ j# U& d7 Y# ]2 g. y
　　 〈/table〉) L: ?/ M/ j0 C$ b9 F4 R
6 X" I( s: n( H$ N2 ]8 X
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
1 y3 M1 Y$ r2 [, E# s  |: o
8 n$ j9 t2 X$ D# G0 ?4 h% L' m　　源代码如下：
; [7 G( N7 V4 m) R. O% h
2 D8 [! O  P* @5 H7 W' F. m7 x) t　　〈table border="0" bgcolor=white〉
8 z9 i" P: a2 m2 |6 g! P' j$ P0 I' Q+ P+ p; H8 B
　　 〈tr〉/ U' `" O! o8 ?
/ X4 i! b8 m. c$ ~6 g
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ q2 u0 R; f9 j6 ~5 a+ W" ^- p" @9 ]& J+ i# {! G5 J% {
　　 〈/td〉
0 p; S7 l; q( _) ^" |) y; I4 M; g% w- R& F  c- x5 ^$ r
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
1 L# x9 ?+ f7 J9 P/ K7 R$ K# w4 x+ t0 X" m- M
　　 〈/td〉
$ ]  L" g6 u) }5 c: E) z  p3 l, S$ _8 {2 b" l$ e5 W
　　 〈/tr〉/ h4 g2 l* w' ?$ K
6 s5 q. k" L. W& Y9 D, m' |1 c
　　 〈tr〉
+ [: D# B4 _! t5 ?$ C* @+ a
4 f  z" @: k+ Y: z) M: l　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: R; W+ ^0 \) O, `
; K8 A8 s& Y8 R+ J　　 〈/td〉
% p4 R. _# U' D5 _- [2 X/ \9 g* x0 v  K5 o2 F7 H# K! b  |
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
: u& `$ m% e# J6 t+ t
1 H0 B  y& [' J
5 D) x0 R, ]* N- H　　 〈/td〉2 k. f; h6 r/ e

- `5 v' x$ _4 K! T" s& s; N7 p　　 〈/tr〉. I- s3 Q, d) U+ o1 N4 p' A  \
' {# a, ~: N" f, A% j) A- z/ p# F
　　〈/table〉

晴天再现

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