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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。0 ]1 m3 Y- J6 C. }, `! G
　　: |# w6 U# S+ O3 }: I. [) ~5 m/ `
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
# S6 |* Z% J2 I8 Q3 B
: v1 v/ j* t2 X1 a8 }　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：8 ~7 {  B% J, l6 l/ O# R7 P- s

  D  _1 ]' F. s5 g; j/ ]8 z( z　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
( a; t2 K% J! i* x- I2 i# Y# y1 x4 \
　　 〈tr〉. P% L9 t$ B, M' b( l% K
6 M3 v$ E, Y) O" E, G
　　 〈td〉
0 u, }% K' J$ s) T; Y. W5 k# |( u" h" t% ]0 D9 S; {
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
  d+ t. G* {$ c, U* D4 c  c: e/ v5 m$ C# K
　　 〈tr〉
2 C! `: k( N4 [2 M4 y
, x; [6 a% O  o- ^+ ~9 X　　 〈td〉% y- H/ o) `, A$ `8 C2 H3 {6 `

) e6 E5 [3 S9 S6 F/ X　　 〈/td〉
9 S( v. t+ D" @. x/ X6 b* y8 F7 v* o2 m( V3 I
　　 〈/tr〉
/ t  `% D# R0 q0 i
/ D) K% }( V/ d) F; z: y+ Q1 u" Z　　 〈/table〉
1 D5 s/ W7 F% ^( B9 \7 o
3 A* H, j4 x" V1 g' C　　 〈/td〉# I3 o8 W4 k4 J# T2 ~9 ?

, r8 c9 t/ K/ K　　 〈/tr〉
4 ]8 \  F0 W! H7 d; g  D! y! {  J) @  m, I  R7 e6 L8 ]: _
　　 〈/table〉
# U8 K- @0 Z  X1 ?: @/ [6 r0 y& K
9 x& l" V. W/ Y3 S7 @$ x　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。3 P, |: l* J2 @0 u* |

  S& b+ a& [  S( ]' b8 ]) A, f　　源代码如下：
5 \; ~8 ?1 I$ ^3 G! ?5 I* `# ^0 P- L$ J9 N  I
　　〈table border="0" bgcolor=white〉& C/ \' g2 V) t6 A
9 o( C7 u& w2 i9 z/ M% P
　　 〈tr〉
5 k+ E8 {. O, l' t* S$ G* V& b' l, {% }: N' \3 @4 _+ y& Q/ R2 {/ E
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉8 R5 m5 A4 M+ w4 m

! [9 u# K& L: c) S% {; v　　 〈/td〉
( a/ C5 ~8 A' F" A8 h/ U4 @
" E" g1 @: U' u& H　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉2 ~$ }, v+ |% c7 c2 Y( j1 B

6 B- b; H8 [. q% {1 y　　 〈/td〉
" Q% o3 q& `$ a# t' j9 P/ C+ h( z; E
5 L$ B' k) f5 \　　 〈/tr〉
% l' G1 U- r& }7 k7 U8 x6 ]7 i* e
9 l& N+ R% u% _% A　　 〈tr〉" m  }$ B8 m% B5 \3 f

, x0 M+ H; o1 g- C! b　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉$ Z3 M( g* \, s! S

. L9 W: Z5 |% _  v　　 〈/td〉' V: [& `) }: p5 v4 ~+ S, s

( H4 {8 j8 U' w1 x: o- O# }' f4 n/ x　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉3 \% e# G0 {8 v

2 A8 S4 ^7 R2 t+ o1 }5 P$ O2 y
: W* h; O3 ]' }  z6 x/ |( p　　 〈/td〉
* C5 n3 C0 p+ t8 B) ^* _
2 E. \+ U2 Y! V& C! t) J　　 〈/tr〉
  S5 B$ O" W9 i8 e+ Y
$ B0 _2 M4 h. q　　〈/table〉

晴天再现

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