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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。( _+ W' W9 ?% M; S1 Y2 G5 x
　　, y, ?, {( W$ ?
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。% ^. j3 ]% P- ]5 j; H% M: U; L, X8 {

6 F- W' ^% I! `$ c& j' b% H% t5 m　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
: T+ E$ S9 U' C$ k( @
) `8 z  o2 b% y$ y5 Y2 Y2 a" _* a　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉8 c9 `) T3 }% z/ E/ {8 l
" u. I' w0 T7 g8 T1 n# K& T" p1 H: s
　　 〈tr〉/ o$ A7 }0 G! S' N. T" F5 J

9 J2 {6 G0 J) v" N5 J% G& u　　 〈td〉5 N  E! V  p% X3 A/ }+ W2 c
2 y0 E, I0 p; L9 ?; ^( L+ p6 w
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉+ R/ c7 i1 ]% L: i! ]
! b: e7 Y; s+ ?) S; \# }9 k( n
　　 〈tr〉
. C8 _0 f4 u! Y/ o7 w' J- y- t, {& U6 ?' o3 \  P1 b1 N; N2 U
　　 〈td〉
" ~; Q9 L- |  r( B3 T4 k, O2 x# G, f
: o# c: L" Q2 `　　 〈/td〉& p8 O* E6 X% u

% U- m8 l! e3 F& t　　 〈/tr〉
5 i  L- m/ C. S7 O8 m1 f% r' Y& h  z( k
　　 〈/table〉
7 w2 Q1 o1 j, C8 ~6 ]4 x+ D) `( i' A( a0 V$ _" `% m
　　 〈/td〉
7 z9 U5 D/ H1 m  m9 M9 Z# K
8 u0 B' |" c4 }. v! @- [　　 〈/tr〉3 V' x0 f* U  Q4 M! d. s

1 |! s* \# b+ l　　 〈/table〉
% [0 e. i8 U9 }! c4 O9 c5 J  \! d" D* q5 P; f
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。* ?' E3 C+ o) w. M5 c! {

( b+ {* j+ g( ]; f4 z' I. u　　源代码如下：7 r7 x# `" r$ b  j% u/ F3 |6 X, p
: q+ K/ A: O# D- [
　　〈table border="0" bgcolor=white〉
% h% z, A! T& o' `" n) E' \
8 i# ~( e  c$ |: |* b　　 〈tr〉
+ O% ~' P, g7 c1 }) X8 g  v8 f, _) M+ Z
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ Z6 w' Z. z, e+ c* A) z" a0 d( @! [% G5 Y0 G
　　 〈/td〉" R( I! P3 h- g: W
3 V  Q0 e* I2 c& _9 D4 T
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
! Q6 Y4 w8 E8 Q/ r6 {+ Z8 X  k4 e# |) H* q6 H
　　 〈/td〉; b/ G# n$ [2 ~6 z1 Z# T; [" \

" Z0 T- v$ n6 C5 f" g4 ]6 _3 J　　 〈/tr〉3 ^& W# n( u+ ~
- x3 H2 N  _9 H9 P5 E& a. c# I1 P" s
　　 〈tr〉; M$ \8 u$ k8 r; K! p

' o! H5 c4 Q3 l! h6 ~4 v　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉5 u- E5 Y. ^4 ]
) l( a% X2 F7 z! T$ ^; a
　　 〈/td〉: v# W- S  k& t" P- @9 I

# X/ F; L+ p; l# k- y　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉+ @& B8 x+ U! e! `* V+ X. z! H$ y
1 u+ c) C+ g: X6 j4 ~; R

2 @0 x* @2 ^; q$ {7 H　　 〈/td〉6 T5 t* N. E& `% _

' @3 M, `7 K' S1 m; O+ F2 k　　 〈/tr〉2 J) W3 ]7 P0 _; [; t
3 I# ^( R7 Y* M8 s. B
　　〈/table〉

晴天再现

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