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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
7 j! |$ z1 _; }　　, i* i& I5 \1 }4 u( O, |
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
7 j" D1 V/ ?' U9 c7 d* k+ F& n; V  a
* U' @: D8 a' ]% g8 N: O　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
; z4 v  d* ]8 v# Z# n. W! @& q% i/ ^/ ]
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
- j) n+ {5 P* O1 @7 `; k! `
/ r, E9 w7 A8 b　　 〈tr〉- W9 _. Q) q" D6 v, ^) h. q5 W& N7 G
# D0 h- w4 \/ `3 {& k( y
　　 〈td〉
7 g: K7 O$ _7 e' g5 q: g
9 s) Y3 n, u0 _, P/ ?" o　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
) r) Y8 z0 r' ]3 J( @+ h
; h! d" G1 d, l5 p: J  d% ^7 s　　 〈tr〉
. ]. E3 t- }! ?2 D2 E5 g' n" t  \5 q9 _1 t/ v
　　 〈td〉
! O/ U5 ~9 @8 I- K8 o' S
8 W8 @! Q  n+ J; `: q6 s" S3 M0 X　　 〈/td〉
9 }3 J/ G/ d6 _" ^; c, D6 y! Z  V& d0 x
　　 〈/tr〉% @; E) i6 L  |0 B- h; m
- }& ]) m' E% E% i/ j% T$ f
　　 〈/table〉( C% [! Z' A' L) [9 T/ v& k( R. C
' V) M$ c9 t) @9 y: h* ~
　　 〈/td〉3 I# O5 l8 @7 i) l
; O6 a% ?+ B/ `0 B% ]$ w! w. r6 l
　　 〈/tr〉2 V1 s" w& x' p# W
9 T9 }4 [8 D" v* A' b; T- |
　　 〈/table〉& K. R0 J+ Q; e, t

4 w) B) ^( N7 ^4 }- t5 d　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
. e- c4 A# ^" @; q. m9 S
3 f! g. O* T7 K　　源代码如下：
6 l8 K% ^" u; z$ Y/ A
; A% d4 r, J+ t# s! A( p3 i# Z　　〈table border="0" bgcolor=white〉
& o* z. q7 @* j2 L, O) G
8 Q. X$ d4 o( \$ y  S　　 〈tr〉! ~& x1 ~, X( f
; {: B0 U1 q" B6 R% ]# I# r
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
% J2 J  S* G& R# a, n5 N2 t, T3 k3 K& |" i) n
　　 〈/td〉# s( K; |. a& Y2 t& ~1 k

* F$ }9 g; j9 o" I& n; G6 o  |　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉4 @  A3 \' F. x: t" G

. _/ ^" l3 x, q( m/ Y! s& U　　 〈/td〉: C: \6 x1 M) y/ \

+ r8 X7 u5 l. U　　 〈/tr〉  @3 s0 l: U+ F4 l+ o1 m

* ~* S$ Q( f" Z" {. q3 D　　 〈tr〉
% u; u2 v& y+ b9 X- J9 F/ z) |* X9 K* ^* C
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉: H' X& L+ h5 u+ e, `7 Q
: }  ^( |4 U) h, Z7 `  L
　　 〈/td〉* g/ J. Q9 {$ |2 d
: ~! k8 x6 G; `7 R. ^% E6 |
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
0 s. Y& F( T1 }! R* q1 n9 e3 v

  R1 Q$ q5 J+ r7 P; D　　 〈/td〉8 B9 d! [0 m7 P2 R' s' E" W" s
. j2 n+ L. w3 ]$ M' C
　　 〈/tr〉0 {; n0 v0 W; O/ f
2 w- J) R+ z# W! ^7 I/ q
　　〈/table〉

晴天再现

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