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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。4 R: Q: K  u; ]. e' N
　　
2 ^; M( a2 F- M" X　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。9 {! Z9 {9 z9 F! y
. g! z4 E" ^* l$ m# U3 C
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
/ ^* H  o$ T' r* a; n3 i" v3 p4 j+ X
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉& Q8 m6 `/ j1 \5 b2 ^
/ m5 q( B% X# c9 z
　　 〈tr〉% G1 ]; n9 l) T" |+ l0 V
8 g& h+ H) q6 u$ ?" K
　　 〈td〉' P; M' |2 P  L+ e7 l

2 P' Y% j7 A8 ?; b3 N　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
" @  u% G  s! f! A2 e' t3 J% O  a) ]: P+ v
　　 〈tr〉
4 L- s* c, ]4 W: A5 s. ?8 J/ M
　　 〈td〉! |6 j5 K, c# U9 J
: N# Q$ H0 c& r$ D" u( K
　　 〈/td〉( p' h( B' e) y) P5 W/ k6 h/ e" l

$ r6 d) n! a" C( b1 v( l) c. x　　 〈/tr〉4 \- e  E3 c* i

! @% k* h6 p* Z& M　　 〈/table〉. ]* _* j( {/ H# M8 u
9 q) \3 {% _2 ^0 M- ~7 H# }9 [
　　 〈/td〉
2 `6 V0 ~  K( P' Z7 U0 t2 E% L6 f+ ?7 {  X0 t+ a
　　 〈/tr〉
' }) V" e# m, `, w
5 h9 J8 p6 ]& G' a　　 〈/table〉/ @# D# o7 ^1 {' S% R$ U* V
8 ^% f7 z4 l! e% M2 c
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。' R9 t% H; `9 B8 T" X7 n8 P6 I$ \

" Z5 ?2 ~# U; p2 {* `3 _　　源代码如下：
' y4 N, ?" S5 O2 Q- w
) U, O) m" l: y: F　　〈table border="0" bgcolor=white〉# E0 @  G! ]# r$ Q; E" k/ B
3 m0 R4 {& H7 |' b
　　 〈tr〉
' p# \; Q$ g, W! R7 `# O( }3 ^$ {$ o9 Z0 T- N+ a; q
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉# Z: l" G2 {, _
5 ?4 {& ?7 F) m
　　 〈/td〉" ?; m" c: ~, I$ v0 _1 _0 z

3 ]! ?; I4 X! y. w/ D　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 T6 G- O+ n6 G3 R' S$ [7 G) i4 \% w- W5 i
　　 〈/td〉/ r# a1 H# [5 h8 x+ m- f4 s: D
! V( h" \5 z) @% }" G0 }0 c
　　 〈/tr〉
' n+ T: i2 c' J) z4 }
5 E- ^& R' k4 V% r　　 〈tr〉
; P% @" d, ]$ x( T
5 q+ p8 l5 f; ~1 z6 L4 o# W7 w* p# v# }　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉( l- i" x6 @5 i* |

/ u$ R3 d& E, o0 q& \　　 〈/td〉
! \* P; a  [2 M7 f4 w6 t5 o7 G
: y/ W5 n1 o; ?% e$ _( S: s! S　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉0 T2 I3 d. K3 A! Q7 O4 T

) u6 J2 S8 z) m1 D- }5 a1 w
3 n, u4 T* w" Q9 z7 N3 u　　 〈/td〉( ?. P+ V, ?, F0 }

9 Z* K2 C- b* x　　 〈/tr〉! z7 P+ k# y- z8 N0 _5 }

: p. l  K, [2 {* J, c: T0 ?) X! {　　〈/table〉

晴天再现

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