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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。6 c: B$ x1 a8 u. h: q
　　
7 X$ m+ g3 S. s, z% o0 [　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。2 Q( m1 c7 u  c/ W  u2 [0 H
/ ~( p7 `% ^; I$ k2 G" |+ @
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
$ ~) N% e1 r3 m' T, ]6 Q$ t( ]- [
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" G4 ~/ h( o9 v9 E& Q, C4 ], U) [- e8 y7 @
　　 〈tr〉
1 W/ p1 ?$ x1 q) O, o  n& ^* d9 c& l2 W6 c
　　 〈td〉
' ]* n  w7 i* t7 d3 U+ r" [; n6 m6 @9 |( s, V+ L' m
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
! j% W. O1 s. e+ ^9 a8 i2 n
9 D  |: q  ~) O) C5 V: U0 ?　　 〈tr〉7 ~, S5 L  w( [2 A

7 l/ [' }6 J& h" s+ V  z　　 〈td〉
" P8 a3 R: v* e. F
1 e% D+ g. `: }% n　　 〈/td〉
+ S* p5 j2 \* a2 L+ f$ Y: p" {8 a: V( n* p- i$ Y- B2 {# O
　　 〈/tr〉% z" a. k, M# S' y9 ^/ V
7 Q9 u) e1 P! A' u1 o
　　 〈/table〉  `' k. \8 r# C0 a# _# }' j

5 E5 A/ T* a% T　　 〈/td〉9 ?* t9 ]7 u4 B# m

8 X4 h, d% l% a3 n$ |0 ~: }: h2 ~　　 〈/tr〉. O6 o* w# P8 ]1 i5 D
6 P* }- g) }! j" B4 N9 o- k. G
　　 〈/table〉+ X% K5 _0 f" O% x% B

$ F' }6 \4 `  F' w( B8 o9 \　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( @) \8 @! H0 l# {  v0 z
& X8 v. k" n: ~1 C5 Q
　　源代码如下：
# m4 x, L0 u  l. H" D$ h0 @
! A+ h: d, R1 s( `/ W2 W　　〈table border="0" bgcolor=white〉
" c1 r( P, G2 t5 Q2 Y: \: K- t; K! h1 h1 \
　　 〈tr〉) D7 m: h  C* x% x

, ^% P2 R- N  N" D- I　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉+ q( f, I) C' j: h; P" P

% A/ U, K/ c4 n+ l: \　　 〈/td〉
) d, D  Z2 Q0 p4 `. t; m! C( w6 J, ~
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉, X! Z$ g4 X, n- h8 N% s$ [
6 {' q0 o, s# d2 C) I/ ^( ]1 T
　　 〈/td〉9 S+ V' U6 @* ]4 k1 K
( c1 V% w& X5 L& w0 l6 n
　　 〈/tr〉
1 ]& }7 @1 p3 a+ m. |7 b0 u' E8 p) c) q& r6 |- K
　　 〈tr〉
3 V+ h6 O: a* F* G4 d, B# o$ z5 g8 Y9 w4 k3 y' q' I. s
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
6 t$ Y; c/ E* U8 S6 B: T% @& ^. M$ M
　　 〈/td〉
' |) T4 ~/ z& A! s
- W# P% |0 ]* N, [+ N) I　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
3 V8 A; b+ n# }" u2 N, I! {$ b- U+ c& G: ?  _! M
1 T! w! Z8 z5 Y' n5 H6 A! E
　　 〈/td〉
9 j7 x7 i1 {- v9 K& g! W! Z: p, q% k3 I/ U& b
　　 〈/tr〉2 t7 i8 P: k5 N1 Q6 [; a) b$ ?

; o, m6 x  z# a6 a　　〈/table〉

晴天再现

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