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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
, E& b1 d: l, R; T+ w　　
2 K  s$ I2 @& z8 ]　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。6 W# g+ o  n# ?& L

7 o0 W& ]  N. J$ [2 P1 Y. b　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
  P/ p) v0 a  V- T! L
, W' r; n! z; Y* H- s- U+ d　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉; r1 h) ?0 V9 {
+ Y. o, _5 R/ U. T; {
　　 〈tr〉
* Q8 x' V7 L( a- p5 i/ Q- y! [& G' I% ~! Q+ {
　　 〈td〉
5 _% B! K1 N' D' D7 w( x- {8 a- a8 s5 a9 G0 X
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
) N* O( j" N& S, G! ^& ^. ]. c$ C# \8 v! q" |
　　 〈tr〉; q% R3 ?- Y2 g# y9 Q$ @4 l" g* L

- r  e1 m0 N' X; O) H% _. Y　　 〈td〉
- \& t! z7 ]( J$ L* C! I
0 Y/ k# K0 ?' K/ q5 X　　 〈/td〉
2 n9 `: e. ?- C* h* D. T6 S; i( h, q
　　 〈/tr〉
: O# q- Q( G# b: L2 ~7 [6 Z2 o
0 z! s8 p; z7 G: v4 \. f. ?& u　　 〈/table〉
! s3 t# X, c7 g; l% T3 J  C
- ]# A/ y: T* d　　 〈/td〉
: A7 J! F, }' j
- {/ X( i1 L' x: A# ~! L: x6 ~  ~9 f9 w　　 〈/tr〉4 g4 a$ s, g' U% F

3 X' A) q0 v6 Z( V1 |　　 〈/table〉- L+ y6 R& i( k# K

6 S- N) D+ z' C& C: ~3 x　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
6 u* }! O, y* T, ^- X* R+ d* G  W+ \
　　源代码如下：
! V5 @) D. O9 D- i& A" C0 B' L) n" q0 A" \! Z# x
　　〈table border="0" bgcolor=white〉
7 E( b- U% v2 C+ O% N2 m# U
. `+ [$ i0 j4 y  `2 N3 Z+ G* D　　 〈tr〉' g- T4 h! @6 S: R' z
+ Z+ y  v/ `  n
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
, k  Y7 C0 m, ~% D. p0 x
" k7 q% N* b4 E9 ]4 S- e0 J; Q　　 〈/td〉& v( Y7 Q0 B. ]! X  n: F0 P, E

0 ~9 Q7 i* ~( c- s! \) P　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉: F; Q0 u* j5 B& K6 U5 A
: e' X' i$ ], w2 \1 |  T. q" ]
　　 〈/td〉
$ W! `/ `* n, h0 Q9 j+ @, Y
  I6 ?! g0 [+ M　　 〈/tr〉# f0 c( e8 u# ~& {' d; R
* ^8 o( ]0 |# I& l# M2 t8 C
　　 〈tr〉# m4 [2 x" p: L7 s
( D4 t( P  T! g0 t
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉* I  F- R, ?0 J) Q8 j3 N) C
5 p7 q$ \9 }5 Y  O0 l
　　 〈/td〉/ W( T5 g& Y$ r& s+ l8 l9 b, J
* T, d* B1 R/ A3 u8 _! X
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉6 \5 d, c0 c2 |) k% ]
9 r/ F1 X" E: N+ J. c5 ~% R+ u

' v: E8 U9 l  S  Y: x　　 〈/td〉3 n. c4 m2 P' B; E  x

# ~" e+ i5 i  i$ y0 k8 b( X  |　　 〈/tr〉9 w0 J* h9 V+ r
1 B) \2 m; W3 @3 L& z8 j
　　〈/table〉

晴天再现

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