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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。( H2 U+ w  H* J! W8 W: K$ e
　　) \/ f. F' n4 M" w8 W7 }* a
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。. y* o) I& C  |, A* [! ]

* |! n* U" H7 [5 n　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：5 }. h# @; a& P

# X+ U  z0 L6 K+ X9 c* ?& ^& K　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉3 |5 _$ X* P3 `! C( }" B! N

* Z2 ?8 i# N9 Z　　 〈tr〉
# ^4 j4 M4 t  j- \% y" \
& `" i1 x. u* o) N3 v: s: m) X8 E　　 〈td〉
$ K5 d. P% h. c  o0 [/ k* b/ p, u: U6 u! U8 |; @* G- b1 V
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
) U$ p2 J- O" u9 M" n+ B: T' L, B* z+ F& C* H+ b! H
　　 〈tr〉
* n7 U5 u! @' P9 R) q' \2 Y" Y9 n) e/ x+ n6 n5 Y
　　 〈td〉1 X* ~2 h3 a) g
7 C# [- M( ?2 b7 n
　　 〈/td〉
; T& P2 {- V: s& I$ o
" G) k, s4 \1 r" m( c" E　　 〈/tr〉& P4 V1 o  }8 S3 F1 ^, I

1 n/ y: g% w& V( X" ]　　 〈/table〉( ~5 _5 l' s) j) N
6 ~* `; G% A3 \
　　 〈/td〉
: ]7 c3 v* S6 e' v7 A! M+ p) i( F6 F' L- `
　　 〈/tr〉, d9 x) Y/ Z% O0 W
' @, G8 R7 `4 \( M& U
　　 〈/table〉
( B# v$ N7 q" F+ Y: ]1 B
1 G+ G( `# [! }7 E# q　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。! b, z# E! L1 w+ f+ \* D

; O0 g) T6 d( E( J/ _" X　　源代码如下：
1 F6 E7 P! R; f
2 a: ^! y8 @  U- i　　〈table border="0" bgcolor=white〉
  o8 D: K4 K# _* Y- H/ \
5 {: P9 L6 S/ j　　 〈tr〉$ n) L7 ?: R0 w6 K* O" ^. x( K" _
1 M: z3 ^* m* H
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 I8 v) q7 c7 ]; R5 E
# t% b, |; A" e- x; v* j2 i  f* v　　 〈/td〉
) N8 U( [, B- `$ i6 @) ^1 a: H4 N: d, Q$ c- Q6 d' C/ y* q
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
6 I- \2 n" l) s' i3 P, o7 b
  z1 e! F& p, u! o' G7 k8 U4 v　　 〈/td〉
4 f: I6 L' i  A+ V% Q8 D2 i1 e& b7 ]9 O  h7 R( I+ F, t
　　 〈/tr〉( `3 I9 ^+ Q& `8 ~6 ^9 `0 s6 s% k

* N- W  H1 `5 C; @　　 〈tr〉7 ]1 n) d$ ?: \" L
1 ~7 s: r8 n' S6 B# z+ K6 E
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉( ~2 A5 V' F( E
) y2 d7 N# T/ b, a
　　 〈/td〉9 O% c1 G: D# H3 S$ c4 Z/ m
- Q, |3 m) q- I1 b
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
+ m* D. g2 m$ J. e% b. w
% s1 M6 F% q% [+ \- R" t5 W! I) C/ @: Y' F+ [0 J$ K
　　 〈/td〉; }' h1 ]+ G9 q# n7 c. o

8 n1 m' O6 B! E4 h$ s6 M& \6 T# R$ w4 k　　 〈/tr〉
' L$ g) F- R" T. S. h# R. m! k* S: O" h! W, U
　　〈/table〉

晴天再现

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