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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
0 l- W5 E, s: M4 _" s: I9 X9 A7 X0 v　　$ e5 ?9 ]" }' u
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。0 T, c" Y0 i/ }1 r9 Y  o

5 Q2 h) D7 w  ^4 N0 J# d# [% w　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
8 l5 v, G* u* Q  h, g: f. ^; U6 i$ [! E3 l( p. a  P- E2 A
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
& Y4 x' V" |' X/ [
+ M, t" h/ T1 f+ R5 b　　 〈tr〉
( C8 B6 V+ h$ X: a0 {+ \/ H! Z# K
　　 〈td〉" q5 p) d6 b! Y  v2 _
. A( r# S+ U/ M5 G
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
/ x5 b  P/ [" ]: o1 w
4 P2 E2 M( i8 S7 P6 n! p, I4 |0 k　　 〈tr〉1 H: |7 v/ w$ B
* ]" V3 F4 E. K; r5 Q( E2 A$ [( {
　　 〈td〉
# E& X! g; U9 M- N, m4 @" C* r, d, R8 }# d( E, s8 B/ L- O" r
　　 〈/td〉* Y, t; Q1 ^- \& o
9 _0 Z# E0 |0 P: ^/ a1 v
　　 〈/tr〉6 b+ L- m5 b' l

9 I# ?: e. r" ?+ C1 P6 g2 U2 V& ^　　 〈/table〉! L3 N5 _6 r& `  i$ E

1 w6 Y1 E3 t! R% W$ I& v　　 〈/td〉
! x8 B3 e( a1 I) i  h% V' W/ U( X. V6 N5 n* [
　　 〈/tr〉9 m% d8 g. U& K  R  n

3 V! C+ t4 w- s4 l0 {　　 〈/table〉
* n: {8 X6 B6 G! x9 K
+ t: N' r, a+ {% g5 u# B+ D' x& `　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。2 X. ^) V; i5 u# _& N  s& W
8 Q  w7 p' C, o5 H3 U/ P1 [; D* r
　　源代码如下：
3 s1 q- r! ?0 n* y
/ x4 U1 w, c6 x. |! ?　　〈table border="0" bgcolor=white〉0 ~/ k; j" j3 w. L9 ?( I

+ M8 f, F" ?8 P( }　　 〈tr〉
2 V$ g' s+ H( ~! J- V- i0 p9 B& N* k2 z: p2 p2 Z( \, A5 i
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉! X2 P$ x, J9 T- h: ~

8 z- Y: l4 Z6 H) u$ O' W　　 〈/td〉0 q* h' ^7 q2 e* I5 I5 l& M

: Z; g6 W! V* v7 w( m, R　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉: Q! [. [2 _0 s5 d8 P+ v
( T  m, a) d. x# {7 y
　　 〈/td〉* d( q# Z" V  [+ s% Y0 |! G

& h$ T$ L- b8 B3 A8 ]% E: [5 p　　 〈/tr〉
- a8 n( D- h2 R* T9 c2 u$ @/ D9 N
: A1 a$ A5 q! t0 t　　 〈tr〉
  K9 m# j( K0 O+ k  S. L% B
2 B" j3 m9 Y: d: Z- }　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
4 o5 K( A7 A+ K5 F
- ^) B6 M4 A" B; F% L2 ^　　 〈/td〉8 h1 p) ~# V* d1 C6 x* r
# e( Z5 A2 T. M: q
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉4 I7 {/ h% Q( |" n2 Q
$ H/ F. s' C! H' b* C  c  A6 D
3 }' @" E3 c* P
　　 〈/td〉# |, X! p' Y1 n% X

4 J# O0 p- f: s, D8 ^　　 〈/tr〉
8 a0 t" D/ w) S: O) R5 ~( v- k( Z6 ~; K, y0 B
　　〈/table〉

晴天再现

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