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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
! d# ^3 H2 S3 u+ h  s8 z, _　　
* E' x9 G  U/ }* g5 D* k) x* z# u　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 c, m1 f# u7 f3 c! t, B

' E! z: ~, o5 x, v# \7 u) P5 W　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：0 H1 ~' W8 P+ t2 o$ E! Z% A
( \+ `9 h; q$ h' L: b
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉! H* N5 C8 ~" X1 J5 H5 t

# w% e3 f/ p& n# q) H8 n　　 〈tr〉+ S1 m5 C" N; z; {9 u/ ^; a
6 t+ D- S- E! y; B: e/ w# O
　　 〈td〉
4 G2 P7 _; ~# j8 c4 {: U: \( @9 u0 N5 y  u& i6 O
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
* P0 x  V. P$ E0 V2 e$ O
2 I& V8 [+ Y9 z8 B; _' E　　 〈tr〉+ Q/ |) b* o7 ^. ?  {
, J3 U: m7 p  O
　　 〈td〉6 W; r. }& M/ y2 [" J* X
! H& _% K2 `, z" \$ P! }
　　 〈/td〉
, Z  a9 C& k8 o$ f; w" p$ ]7 `/ t% b& [( K/ a; H! y% H
　　 〈/tr〉+ g8 B  _* c7 l5 p, @
6 c2 A6 F9 E0 q+ X+ D9 F& [
　　 〈/table〉
: }0 w/ }8 A; r. x* n) U. r
1 ]9 V4 ~, z4 Z5 x* q0 P　　 〈/td〉4 w! X, q$ v( i9 O( l

1 b, M9 I1 j# T4 S# c9 B　　 〈/tr〉+ Q8 t! \! b: a. P7 w
- e- c  V2 Q. T1 I3 y
　　 〈/table〉
2 K; d2 Y* P7 `) n: P  J$ ^: H- y
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。$ w5 g! W) E' D5 J, I4 K4 h

% W9 n0 {# n# g3 x# J0 W　　源代码如下：( K: {) t2 C) F/ N* r

! E+ B6 r$ r/ X; `2 b　　〈table border="0" bgcolor=white〉% L" N: g0 Q7 ^4 i$ P. C
! @* F  X# d3 W) ^4 O# m
　　 〈tr〉
9 v* U5 w1 a  R2 W* L9 C
5 ]2 o9 X) Q( _4 i- O9 e, ^1 I　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉0 R( {9 b2 J+ t4 R9 R! x# x) j( ]
' Q. D& d7 f1 D" c7 Q
　　 〈/td〉
' q5 [0 f! a4 Y6 D& x; P/ H0 A/ S4 K2 h! U) C
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
1 K# |/ s- k3 e8 ^7 p8 X9 p  C& D# X$ P" ?  @/ o# ?% v! G# B' m
　　 〈/td〉
) M: f7 x! x5 e% ]! ~8 y- W) H2 ]4 A) a
　　 〈/tr〉
# k' `, n1 o+ C! D% _; n
. L) q7 N; J/ \3 j' v　　 〈tr〉
, S  n( m1 g4 O3 o+ Y9 c- m. H/ p2 [  z* w7 T
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, A, i6 H6 t, T$ ^: J7 O

# c" q/ m1 l' L3 l. N　　 〈/td〉
9 a" L8 |8 m+ u% R2 D0 x! x' J, ?. w. O; t. N
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 i& Z+ ]& {$ @* W7 O
9 v/ N. H) W+ f2 z5 X# ^4 F* I

: ], |+ f8 r6 [3 g5 e4 b　　 〈/td〉7 D* M" f3 N  {' ^- M
# [% S" Q0 X+ G
　　 〈/tr〉3 ~6 i3 u/ H/ _, W8 G# I; t
, b# G: s; _  w$ i+ v* t
　　〈/table〉

晴天再现

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