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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。( U2 b1 o& Y: I+ |  {4 \2 V# `
　　
' P- V' b4 E4 H/ q. g0 }　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。, l2 p, D' \$ a$ Y8 ?

" H; _  R8 \+ ~0 U　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
" h$ w8 C/ L! \+ _0 }
( z8 D! e! H9 o+ ~　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 i8 S" E" m  W$ Z* J. _% f
8 r( I: ~! l- s6 `& X# J　　 〈tr〉, k6 I! [# v3 Z& f) c

3 v6 X5 S6 \  z9 i' a1 B8 `　　 〈td〉1 V/ H5 _6 A! |' j- W$ i+ D

$ F: v: d1 v) V7 D! ^7 r　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
1 R* f9 q* y6 H* [! @$ h! ^0 q( ^9 J8 X5 F( f5 g7 U( |
　　 〈tr〉  w- y1 G9 f) q' z+ b1 T

- ~3 {; ^3 j, ~% d　　 〈td〉
+ n" Z9 S7 D& q7 ?2 h& b; O/ h& ~% y
　　 〈/td〉
' J' C- }% O, `  H+ }, H3 A+ A* Z* |2 z6 V2 h# z4 I
　　 〈/tr〉
$ @& Y( g9 u0 p1 M
% c) J- j1 g0 Z; z　　 〈/table〉
) O8 K. i+ ]6 J# B
0 }. I5 p5 ^1 j, u　　 〈/td〉
7 b: f1 h; Z4 S4 z
1 `1 N1 z  i# b( y1 G　　 〈/tr〉
" x0 L8 s- O" G, t  W$ a
3 ?4 F$ ]5 k5 e# K" R　　 〈/table〉
" `! G+ J/ Q; ?& z, J
) P& }6 V! D- |　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
. R- r( P9 `5 o; W# {/ S- u9 @+ u4 j( K9 E8 G9 R+ \+ O
　　源代码如下：  F2 \3 X7 z5 B8 y4 I6 T& `9 t& g
) {% G6 Y* o- K0 M9 K* E8 T; M6 r: v' B
　　〈table border="0" bgcolor=white〉
3 p2 Z8 U  r* I- S2 l! r5 o
& m; A* P/ ]+ ~( r) C　　 〈tr〉8 G+ K9 m! a' \" h% ]  ?5 s

) W5 X4 v7 u6 ]" r4 u6 P: W　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
8 g" q* `$ G( _8 v+ P8 _" x: ]
$ I& G) c) e# X　　 〈/td〉
/ o" l1 y- Y  _7 X* h
6 O5 z6 T( g6 a1 B　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉; g7 D! U# W/ Q, `- m, p$ U, j% A
; A2 W4 F( [0 }2 h
　　 〈/td〉
4 u9 J9 ^$ _1 d& p6 w  W, _+ P! y0 ^) W! e0 ^( D, T2 ^9 C: v4 K
　　 〈/tr〉
) `* _" `2 [; G& _+ A- }; n+ E  D" Z& |! i* \; `
　　 〈tr〉1 D+ }2 ?- t7 Y( }, F: E
/ n) |$ J/ [* ~& f' Z
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉) V$ k, J. l- l6 d* U+ n1 ?0 \

& P! J) t1 X/ l- a  G: P　　 〈/td〉
! E! @  B! i' ~  F" T% Q' G' N& h/ d5 b6 ^% @; E5 ?
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉& a( M% U7 A& }7 h3 W
- C1 S$ e  G% p
; N; I8 u# b3 y# P3 i6 _8 o
　　 〈/td〉1 G5 S5 S! r8 Q; B& z
3 U% `! \# K# Y  S  Y
　　 〈/tr〉2 l5 }1 m7 n' @) O
* {5 W$ x* q# f
　　〈/table〉

晴天再现

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