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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
( w$ y7 p. s$ [2 ]2 k% v　　
0 `  }. S$ h8 v1 y" L$ v+ c. `　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
2 V$ r, J0 n- p" {# w6 j& R  E$ X+ q% p
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：9 L7 W: h! x  u) }

6 I  {5 D: W, ^/ B　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉' L: A2 q7 y1 N! |
. [! L, I( u; A$ H! x
　　 〈tr〉3 N. f  x4 f' O' q' n' {# @
9 V- N1 E( K; R3 H5 E8 _
　　 〈td〉! j6 Q# S) G: i4 b

/ m2 L1 u9 z5 J( z$ U1 i9 b　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; T3 R' Z4 U) A0 S4 y! y$ z3 N' f" C5 X' v
　　 〈tr〉
1 p4 Z1 A6 e: H$ F7 p( J! I- ]3 ]4 k  M2 A( A: }* n
　　 〈td〉
! v1 e! C3 C: G. U8 J
2 b2 ?/ u. B- f# [/ {# ?　　 〈/td〉, K2 V6 x1 z4 F0 v1 Z
7 z$ N, {; R- w0 v, P& i
　　 〈/tr〉# w& R4 n! ~1 w7 T' @) U$ ]

% F. c7 V! \; b" ~  F+ v$ i( L" z　　 〈/table〉
- M. E) |! _3 Q) {
* k. ]- i9 V6 b: w　　 〈/td〉
% a6 i$ P2 t6 ~( G# N: w/ r3 U9 e7 h9 \: \6 ?
　　 〈/tr〉
% O1 W" J' x, m$ F5 o) y. w  d' h7 A' N4 }; ?* O
　　 〈/table〉/ h) U0 w+ \- H0 Z: s
0 N1 e! ~1 d1 M1 y3 X
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。' O1 H7 U% n) ^+ \7 @

0 e" I/ P3 C3 C　　源代码如下：
8 f+ t$ D$ ?, E) O2 u3 @4 a' K' V5 Z/ L0 F* a
　　〈table border="0" bgcolor=white〉$ e, Q2 T1 N/ V: t. m

6 w- {. |; s$ z! b4 R- t( f　　 〈tr〉. |( S; ~) R* i5 H% ~+ K+ A

3 }: ~0 \* o, I" |" T( G- {　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
' {, U- o* M8 ?) {
/ @$ e- p, N; H$ s　　 〈/td〉
' l1 J9 \! Y7 f' T# I/ a  w4 t' [) k2 C$ }
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉* Y. a( I% V& e2 U& F' N

# s1 y5 h; [, _& O　　 〈/td〉
1 X" u: d( d$ M7 c4 ^3 A" @
- p% D6 l5 l2 R' h" K: M/ c　　 〈/tr〉1 D1 S# L+ `4 n1 a$ d, l
7 [: n. |2 {7 }1 Q# `# |
　　 〈tr〉
! b) O* t  c  r* E) h# g' B& B
% a, o* a' D3 E9 ?8 l# S　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
$ l! B# F: i+ W! j/ r. [5 ~6 I4 F. C- T. u
　　 〈/td〉
5 S8 V7 v. j" d, r1 w; b7 U4 [; T: [' H/ `/ \) G
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
5 W$ n# w) c. n, I
% i! q6 H3 U: H% y7 m* \- U( b7 \& t4 [$ S
　　 〈/td〉) m7 ?8 O; R; `  N7 E( u

& f+ o- x  y# x* Z0 |% t$ e　　 〈/tr〉
( j  A" V/ _3 F. K( ?
- ^- k4 v( C* P7 e　　〈/table〉

晴天再现

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