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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。/ i3 d% b' v: Z7 m# p# D
　　
$ _* h# [% [! Y　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
" o0 ~- h& H8 U2 {
: B$ L8 e0 f; `　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
+ y5 b; c- I6 `, j; T4 N
1 g3 H1 Z6 M$ J5 w6 o# [8 B　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
" H2 t7 H) m: a( d! p4 i( z* ]; o- N. P# d1 r% |
　　 〈tr〉
9 w% E  }6 S. n7 S8 t; S1 {  e
" s# D- M/ V( ^4 e; i. G6 c　　 〈td〉( B/ `" V: s; x) f  S

7 L) v" z9 f" \　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
# N  B0 D1 M" b* l5 d2 |* v$ u% V9 v/ l
　　 〈tr〉
' j; {# g$ y( W
4 j5 B4 y4 w# n4 K4 d　　 〈td〉+ z7 ^+ J! J9 y( t

+ ]' }& @4 y# @4 p- r; x+ `  M　　 〈/td〉
+ C4 R7 S+ p% i6 a0 z7 h8 q% n2 l* o5 x: J! X6 Z$ M1 k
　　 〈/tr〉/ M( b# Q1 R; a# x! S# G8 q* t
/ u$ ~1 ~; z4 M  }
　　 〈/table〉
1 a4 X# C' D) g& t7 y, E: z. M5 `/ `" Z7 S' _9 @
　　 〈/td〉
% D1 A, d1 e( N% M" {4 }
9 A0 W1 m/ B2 P　　 〈/tr〉7 q0 b$ T% E/ M$ z

" v* `9 m! x( I9 N; {　　 〈/table〉
) q0 S8 O# p& u) v3 F! }3 }* h" |/ J. N  t2 ^6 W% h
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
! o3 m1 ^; S& x' \% a5 S1 w
+ U$ a4 z. `( `* h3 ?5 F" p　　源代码如下：0 w0 c1 |  X* X$ q2 o7 G

$ V" T# {) ]4 ?: D  h, O　　〈table border="0" bgcolor=white〉* ~0 \/ N; p6 c* T7 [, [

' B, ^# N- ?7 t0 D" W　　 〈tr〉
# K" l3 d, F8 B, a- m0 @' ^0 ?' m+ a
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉. G# h. D) ^' H  @9 Q6 y  d' U8 D* p+ `
5 x& [" p3 g1 `9 ^: h2 O7 U3 l
　　 〈/td〉) P/ Z" S8 d5 k& ~- [: c/ c
: K7 u; v  p1 r, `
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
1 u! C! S( Y0 N( A# `" Y
' f+ c7 y5 E" v. \3 x7 O　　 〈/td〉/ Y/ |( R0 |% Y1 ]" y5 C

: z7 D  h' q3 S5 l! f& e( o+ C　　 〈/tr〉
3 W4 ~$ y& ^" B  O- m' s# ^/ Z2 z" o, {5 y3 _+ O/ @6 P9 C
　　 〈tr〉6 m: N5 M( l, x( e1 ?

2 q  ^) \8 X; J. O　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉0 ^. Q+ K1 a3 r9 m- o( L

0 S  C& Z1 y# g　　 〈/td〉( i! y7 i! m" D/ e6 |
: o8 A2 K9 F0 h1 ~+ Z
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
/ W+ W! Q) [* k, q- @* n
( g# C" O5 ?' S% ]+ h1 ~1 l
0 ?- P) P3 `1 ]% t# s9 `8 ^　　 〈/td〉
, {3 R2 @5 n9 z9 f8 G. H* ], p0 g. G# o! L6 R
　　 〈/tr〉
0 j6 L+ K3 [% B' r2 d
" N6 b8 d; u2 _1 \! @) s5 k8 R　　〈/table〉

晴天再现

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