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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。5 i( \2 v' M( x9 b/ o2 x0 S
　　- B4 {& `7 Y2 P- K% @% k+ Y5 B
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
5 ]8 k7 D, D* `  i
$ f+ v6 P6 ?# @) }) c& V　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：' z1 b4 ~. a. g

( f1 C. w( R, [* p7 P　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉6 m0 v: I1 }& F& D2 A

( x* Q5 }+ R7 s' \: O0 `- Q6 o　　 〈tr〉
& Z1 R3 A) `  Y. _7 Y. A
8 C8 @) H( ?) ?　　 〈td〉
* A& F" g( c& r- w# m* y% G. Z% Z# N6 X5 `9 L. Q& j
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉1 |3 D) W* Z* O0 M6 F( q/ I! `

7 c- N9 p6 B- U/ R　　 〈tr〉+ r5 u5 U( ^; x) b$ T

) ~+ |6 k. G" X+ _　　 〈td〉$ C& C* c+ M/ Z" e& S

- J" f1 [% _$ t2 S# h9 q6 M　　 〈/td〉1 i- ~( r4 I6 ?* W
% J9 k% n" [7 I- Y: C
　　 〈/tr〉
( x1 t: d+ D5 c  R6 x0 D/ C% K2 N
& `+ ^2 A  f3 @# q. a( e7 Y　　 〈/table〉
5 y, h$ Z8 e8 E# V: d. t! w1 d! j3 k, m7 d6 j9 t
　　 〈/td〉$ M" J) v2 r- Y7 U: s! v+ F
3 D8 ~- P+ k; [$ [. S; {
　　 〈/tr〉
4 u& s0 j/ ]  r, }6 c( {2 a8 \) a
　　 〈/table〉
9 z* K# r2 o; Q: @0 x6 t" n* b$ |# G7 W2 e: j
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。  N& h: ^9 c! D
' v. ]$ {& k3 A; ~
　　源代码如下：
4 z' o" C2 c& h# _, Z
1 A& N5 G5 @6 P' N& Z) J6 R　　〈table border="0" bgcolor=white〉
: N7 R& m; f8 O# L, |, f) j& \, C
　　 〈tr〉5 i- G, c0 \2 V8 R$ ?; M, @# _

' |1 G% X9 h( I　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉" h9 P& v' t4 w& R4 j1 w* \
+ y) I( I. q6 ~. e! C/ _$ q) s
　　 〈/td〉% B3 }1 E' T: B  g! c* C& C, {
5 L( W* y; `7 ]3 H+ k9 C1 _
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉- q0 W' Y7 i* ^8 K: ^! l

2 A, v  j" L. o! Y2 `5 m; l( W. e0 z　　 〈/td〉8 u* ~  y  a8 }  A/ h& Z6 h
1 N4 n3 y, }) h& b5 k" F
　　 〈/tr〉# i: v! y  J& A! T4 X( |
3 R' Q% R9 W/ _# u7 `$ Y, f
　　 〈tr〉
( v1 B# d* R8 L+ \5 L1 A0 w1 K$ l1 R1 Y& R& m
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉& @0 A% |. [8 [( |8 A* e% w

0 a, j7 m! m$ m　　 〈/td〉
) o0 A, T/ F; q6 {- z' Q! L) O6 D5 Z7 T; R, p; j- M
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
- J3 L' E7 {! z- h9 B; c: B9 Z9 d& ?! j! O% J) }. x& P5 w0 z  U

- y- Q3 e7 S" F% {( X6 P3 s　　 〈/td〉) z( ]' B, P4 M3 ?

( B2 g( l! ~. w6 c" {% g! D　　 〈/tr〉
! K8 U/ w* x: `' _" b
' q+ N+ F8 g6 k　　〈/table〉

晴天再现

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