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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。4 u! Y/ ?  p+ g7 V4 Z  a* |
　　
$ @" W' V# F; L2 F　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
% W; U7 r9 f  J6 V. [/ ~5 W, I" w; K: k) J
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' `: K. [  Z$ x" u  \+ T' ^- B  s3 r  k/ L1 G* z4 C  }. z: A; ]
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" J: z) R/ i# _9 `1 V# q6 E) j' p) k' Z( P7 \( M8 o
　　 〈tr〉
9 _6 a* f0 ?: ^2 T
7 [" `' [9 N4 m. J2 V　　 〈td〉, ^  s- |- z1 |& C$ u7 E
4 Q- x9 p) J' i6 F+ T
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉1 [0 j) w' ?+ _7 K, E- ]+ B4 n

7 F, g$ k  u, A8 y) c　　 〈tr〉
. K6 ]. J; k9 J! q1 n+ e; {/ [
. a1 f$ u; w8 C2 v　　 〈td〉  T. G4 _& ^- }& S& ~# q
7 P  T) {# Q% }+ }  D% h0 w1 d/ R2 w
　　 〈/td〉
2 e8 X1 z% g2 a' M( O8 v6 W, a
3 i1 K4 E7 D+ s% v0 Z; P# g9 R　　 〈/tr〉
% J2 [5 R" }3 Q1 U' ]$ e9 h" ?( t$ |, @4 Z/ c
　　 〈/table〉
) [) g6 [& X3 J5 R, N7 g8 J4 H8 C% S2 d' y
　　 〈/td〉, V5 l9 h; ]! C( d: S" ~, H0 A
, W" g; R; R0 a8 U3 r/ s( v
　　 〈/tr〉
) ~* `- `% A7 V5 B; x
9 {$ j2 O) {" J4 _6 _. K4 I　　 〈/table〉1 c, ^0 N- D+ N0 Y4 ]( G% L
. G2 D; o$ n3 m9 {0 u6 N- Z$ E
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ v0 s/ }* i. A- Z- C1 C) q
! s! T" t0 m5 ]; g/ l, C- c3 L　　源代码如下：4 G( d9 W1 y7 o5 G2 ?
9 W# h3 O7 G% q7 k% k: ~
　　〈table border="0" bgcolor=white〉
$ E8 e$ Y6 ]" w% I% l! f  q* G( u: \! i  Q, F# ^* B' L  n
　　 〈tr〉
3 e; O6 p% l8 J& D% X& ^1 N& t( t& I
8 b) z& W1 K! j2 e' {, F7 R　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
& u, a8 c9 U$ ~
: o4 k* Y' x$ h+ v　　 〈/td〉) i! b- ?/ V  m! T7 m+ J4 ?
( N2 w+ N& ^/ j9 Y) ?
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉! r, G0 N) |: ^0 q& n/ a
) ^# f- ~" Z/ [% U6 T
　　 〈/td〉. u* Y. @7 X7 I7 ~
2 A' u2 C) t- a0 F# l  R9 x3 m
　　 〈/tr〉
, P9 \" z7 K# `4 U8 @& f0 Q9 q3 t. E" T$ A/ J  ~! [
　　 〈tr〉
/ }/ E3 ~5 I2 p* H5 p
0 j+ {/ a4 J' M% k　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉8 u+ F/ o/ o& [5 ]

0 s! V" E- m( e. q　　 〈/td〉
& W4 y3 Z% {: w5 o  C1 f& Y+ o' H4 [) Q, m( V5 R
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉2 M) l3 u8 E9 w! Q8 y& s$ @

& K& P" q8 E* r7 X# b: c9 j  q, x
9 f+ F+ M: U8 B2 O: _; }% w5 ^: S　　 〈/td〉# E% S0 ?/ T* n7 R" L( v+ r; u8 [

- H" w: |/ n7 h+ @% v4 ^　　 〈/tr〉( T3 I! m) d( V

* t0 [- G# s& G" l+ r6 @　　〈/table〉

晴天再现

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