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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。/ S. H: S+ g% c5 s7 ]
　　4 E) F% ~3 U9 D7 T- ?) O5 `
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
' z3 L0 w( ]+ t# G8 w1 K7 ]
& d) q! e9 `+ W$ m1 _( p　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：4 I/ v4 {1 u0 }

! d6 Z$ R0 v4 f　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉9 v. W' q# S. C  x9 Y6 J5 f5 |
/ Q. {0 p* m- X1 ~  a# k; a
　　 〈tr〉
7 Y3 p+ P" x$ z: Z: ^
& j& G: P3 b* A; i/ R# a5 s' a　　 〈td〉
7 E; @2 Z9 F9 d1 s7 _( W6 n
# s. f+ u1 z! Q3 X; x( v　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉& ^6 }0 R) z8 B+ V/ e
* O0 _& M  ]# n0 {" s3 S% p
　　 〈tr〉
  {) B! h3 Z, f# D! M. O) ]& b% s  P5 v# [0 H- m
　　 〈td〉
. I+ v2 q  W- X, v; T9 P1 Z, T0 }* J1 a0 b/ R4 b6 h6 ]$ X
　　 〈/td〉; b; w& y& {) r/ p; r8 G% F" d

! Y1 U8 X; R; a: [/ }　　 〈/tr〉
6 S: g4 ~  v. v0 \
( b0 H- y. h0 g$ b) g! s1 x5 I　　 〈/table〉
+ G5 Y3 S4 Y! |9 v* x4 d% @
0 G3 }8 j4 j) X' }" P# S7 D　　 〈/td〉* w) g7 k" O3 z  g& X" D. b1 t
2 P+ y2 f# H8 R1 `$ Y6 A
　　 〈/tr〉
5 O$ N& o) S1 U4 g* p' x- j0 |9 p- o
　　 〈/table〉
" [' v& s3 ^6 p( s8 N0 |6 ]: B' V& t! Q! h0 p- `
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
9 V0 D# Y1 W9 H" c9 W0 G1 P) _6 W! C( O3 T" c) Z
　　源代码如下：* R* G/ S/ v2 I. w

% ~* y9 h8 {7 @7 H& e# P8 Q+ {　　〈table border="0" bgcolor=white〉. ^- F/ F2 k. X4 |& H% h! x

  L/ o  ?3 u$ E' @" {- e2 ~/ W　　 〈tr〉% n4 `4 u% d; ?1 Q, m/ |* T$ T

" |% e7 p* ~8 Z& Z; S. o　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉# t+ p( f3 p9 I0 u" |$ J% U3 U" }
, P/ R0 r, A) h
　　 〈/td〉: |" ?2 D, V- [1 o& d& R" o
" r7 n  A3 T) N4 L6 i8 [$ U
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
8 |% X% A- A+ m' W! v- n9 L! n5 E! l; ~1 V  |* h
　　 〈/td〉0 Q& W2 N5 j' i$ n5 G% m
" @7 C# f. Y: J% n( g. d
　　 〈/tr〉
7 Y3 p* Y9 P, O
7 i  n  c& _+ t" L2 c　　 〈tr〉- A" z7 N( \( I

* k( t* T% g$ f. Q7 |$ [7 ]　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
4 [" u  n6 p* q+ e* _2 B$ F# m# r: Y7 \) J" [5 v; X
　　 〈/td〉, i$ ^1 j1 W4 j

0 E* c' D2 C7 ]3 U9 d　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
3 u/ i& }+ K- u- r" I
0 K0 n7 C5 p/ v0 [' t7 K+ Y1 o+ j" `1 s; i' E& z
　　 〈/td〉& K- ^3 W- V2 m2 N1 i
: X$ m- b9 N  p! r3 v* C" X! z1 `+ k
　　 〈/tr〉
2 T8 W8 ]; k- A0 @* M4 M
* c) }$ X1 L' i; Q" I" U+ h, [1 R　　〈/table〉

晴天再现

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