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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
' e/ t* T$ W$ g+ k　　9 P1 {  C5 I+ |2 j
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。/ B6 ]/ z$ m: ~- X6 L4 n
6 v1 q; \/ q$ Y4 P# m9 R7 @
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：6 o% v' R/ I  m0 P5 q" i
  M% J% d) ~  U2 u: U5 n/ H
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
' w) l4 V# k, @0 Y  ?. k3 @. h8 S
( A: B! v1 z% l　　 〈tr〉
$ p( W, Y2 A/ c' ?% P/ V3 f# ^# c; {  ?* L/ \$ @
　　 〈td〉
' V/ p' q3 B5 k, k, ]7 Z0 s: G
2 Z' m' v8 B; a6 `$ o　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
4 g9 \/ ?  Y: q6 ^2 Y9 O0 z
5 Q4 X8 t) Y" ^) z　　 〈tr〉
/ }& a$ M: _- o6 d% ?% C+ c% @4 Z1 K  r5 W
　　 〈td〉$ e6 A* {+ S5 u) M) C
/ ^! x  k( [2 J
　　 〈/td〉. d6 k( ~6 A! i* R  c

6 A5 }! r4 b+ S　　 〈/tr〉
1 R$ y* Q0 h( |# n1 u. Y+ {
, w5 k4 ]: C$ b- i　　 〈/table〉$ Z3 W  D% y( i' Z

1 O% Z1 N" T7 r6 q" r1 l; M. r3 K　　 〈/td〉' I( m2 _* O- [3 v9 K

0 b: M: Y) i9 h2 m8 K. h$ f8 Y　　 〈/tr〉2 \7 D: V0 c5 F7 i) s

. e) I0 f/ T3 U1 |/ `! J　　 〈/table〉! u5 T+ n; s7 l; a" ?
" ^9 F- o# d5 ]$ H' P! [
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。/ }$ \4 K& Y, [6 i2 |

6 H2 h& s5 P0 k# k6 A) P　　源代码如下：
) b# m/ H2 p2 @; j9 @5 K9 o$ ~" q. N. Z% K1 ^6 C# l* b6 J0 f1 G
　　〈table border="0" bgcolor=white〉
" ^( g4 A- w1 y# d6 O9 a8 S# _, Z6 K' T
　　 〈tr〉- q3 N: M9 X+ u; q, P4 r

, @! \( l8 s1 }, o4 v　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
' C6 w  {: C& z* U3 M5 u7 b1 e  H4 g- `( }9 W% |6 ?
　　 〈/td〉
6 I/ s, c" D1 B' B6 ~! O9 F  B/ i8 V9 v- Y$ y( O
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
2 f3 a4 P$ E4 A2 ]
0 w! s- I6 J/ H; T- b　　 〈/td〉
. [4 W" U* x; z2 S
. s% Z; v) ^- s  A　　 〈/tr〉
+ K: o8 E1 D' v" h) v# t' v( h* t' ~. V- H# d: A' a5 l6 o% [" y
　　 〈tr〉
; ^7 A% E. g6 ]/ U. R8 G8 x/ i. ?4 Z' C8 X, [; C
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
5 F" g3 G" U/ q
) d* f) B! X( w# X, i6 n8 ^% @* S　　 〈/td〉
8 X) I2 }% w$ p3 D9 x2 x+ N* e# E' t1 t, o$ v( r& ^! |& k
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
. ~: V9 ~, A3 N" Y, k( M0 F7 }% r/ G  E0 C% Q

$ ~8 z5 g% L4 s% ~7 a5 E9 V　　 〈/td〉
1 E1 e4 T+ v' G- _) Z  [1 G1 m, b5 q$ |, u
　　 〈/tr〉
0 |3 k- Y2 {( r1 H/ e1 W6 A
/ ~2 o6 z/ A$ B) x3 N  V　　〈/table〉

晴天再现

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