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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。7 ^" W0 i, R# I7 @+ Z& i1 B
　　+ g/ v0 E# ^+ s9 M
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。) w% n; L% s% x1 g: t* ]1 K
+ o( R- B/ ]1 f3 @
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
! n4 g( c% ?3 `9 {, E: [( O5 s0 }2 A7 q
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉- J% U9 z+ O: y. g" t5 M0 e
; \* V+ O7 k' _/ w' O! G
　　 〈tr〉1 {7 l- Z- b7 t7 ?

( Q: w( R8 @* j" D　　 〈td〉% M+ i. D* _4 K$ w* e( A# N

1 Q5 d6 F- P& g& ]" _, o　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉% S. W7 Q" k9 k+ z. v* H$ f

% r* a8 n- \1 c　　 〈tr〉, L* Y* I: U1 O" D

8 U  {  {7 F, o5 j5 r8 _　　 〈td〉% J" q" c" u8 }5 M' V/ x0 L/ `4 Z
3 R6 h% ], i+ t- H
　　 〈/td〉
3 t5 G; O$ B/ @8 t1 B3 H6 Q" t1 z! ^4 ?# C, ~9 l8 `  x; W
　　 〈/tr〉
- p, X7 Y9 P5 b: E+ m! b3 G+ F2 S) s& y  `* x8 V
　　 〈/table〉6 x) Q/ n) x2 ^# P
& {9 @3 l" R7 p- r6 @  J
　　 〈/td〉
' H' B, X" \8 \, `& [
; r1 y& ?! H% a. Y; V　　 〈/tr〉
- Q  ~5 f: @& {9 S' q; P( T
/ [, h: |" v# i  q. w/ T　　 〈/table〉$ R$ w  b; F: C0 q

; g. J* l/ d5 A! e3 e# A　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。/ k) O* Z- t+ D6 H" O( E: O; ^
4 }( J# C  p1 q4 r7 |3 r" B5 i* ]
　　源代码如下：
5 k- p, L' \9 d1 a! c* s0 J$ a  _" J' w9 Z  e
　　〈table border="0" bgcolor=white〉
$ a0 h! f3 M6 `/ R  w- V8 Q1 b8 S/ o6 G  `6 q
　　 〈tr〉% m2 P* g* b8 q( l$ ], A9 p# \* ]3 F

' ]6 r( c* q- V9 V　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
7 O  w# D* W& d5 f$ L
8 X" r" L! M  D+ J2 G1 x9 X　　 〈/td〉. e4 ]' y$ V: s9 X

* G2 w& n: ]/ v6 K  s　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
% y2 P1 a$ T7 d6 @0 s" {  Y
9 v* S* S; S4 q　　 〈/td〉
6 k$ U; Y; o$ N' b, J3 A7 Z3 v& z2 V' I) f, f
　　 〈/tr〉, t. ~  Z$ ~) r6 J- m' e5 _$ J
( U+ m, [- r6 \7 b9 ?
　　 〈tr〉& s! V: y. v& G* n6 O, D9 H1 X
( k' D/ e% R- o: @+ k# {
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
4 z  a1 H6 Q) O. `! M+ e
  \0 v. t8 _) ?/ R6 s) t- d6 {% h　　 〈/td〉4 T8 _4 w! k. c4 D# F) y- T
- p5 q& E8 d4 D* [& I+ [
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
5 t) H% z" [8 H; ^5 u% ^6 i  D: ^2 G2 j# |( c

- v1 f) K, ?( y3 o6 x. {$ t　　 〈/td〉2 `; e1 k9 g# ]! I. {
! a, [+ A9 ]: ^+ Y8 M
　　 〈/tr〉
+ g. @" C# L4 I& s! z
9 |! |: i6 H' @- N% L% ^1 {7 L　　〈/table〉

晴天再现

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