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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。3 F) E# w. N" _
　　7 t# P, v2 M" o, U' k) m3 n$ ~
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。, ^  B6 f: |6 T4 q( n$ w: I
2 L: `$ J  Z" v
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
: m  n" I% |" J  f9 h6 D9 t: R& p& p5 R+ R( Y
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉; u5 \3 X1 F" ?; m

2 v1 L% H& K; H3 U　　 〈tr〉
5 b5 d$ J; g0 x2 J! Z5 G3 M# V! Z# l" U; i4 O8 P0 N9 b
　　 〈td〉$ \9 J+ Y) _# N( C8 @( q
' E. ^6 M$ X) m: R  T
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
5 B- x, |* K# `- D( m! r- R/ O0 ~4 Z9 j. J, j: G0 Q8 G
　　 〈tr〉1 S  P- S7 y- C/ J6 W

# b" s7 B" |4 p2 t* k' M9 U2 N7 g+ |　　 〈td〉
1 ]2 q! a0 k$ q; b0 [. H+ z
# I6 z6 E) L% ^( m8 M) |; K6 ]( I　　 〈/td〉: S  ~. R+ F( j3 f1 M0 E/ ^
! C1 m+ M$ ~$ T/ }
　　 〈/tr〉
! [' j& D: _- G- K
- Q' |- F7 Y- D% m. Q　　 〈/table〉
  C/ T- u8 d0 }6 o' \; I3 u- l8 @0 W- \6 o. j0 u
　　 〈/td〉! _( }. J. z, {2 ?. s0 X& d$ e" v1 y
0 m, l  Q% z6 Z: U: x
　　 〈/tr〉
7 d0 d9 B& r: I+ X$ t) ~4 n- o8 O, q8 M+ V3 f
　　 〈/table〉
  T8 T8 C/ K3 K3 j0 o- e' i: @. n/ U- p/ S2 j. U0 {% z3 E) a
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。, }* v" b' O. t1 F& m% r# a3 z. Z

! n$ v: N4 g* C( e. d　　源代码如下：+ y/ ~2 W7 R  t( M, d# R- A

1 t  m% H4 T% m0 @/ `7 f4 v　　〈table border="0" bgcolor=white〉  s, n/ v6 y; K0 M9 r
  z/ X( i4 p: Z8 v% S
　　 〈tr〉7 x) r" _9 ?4 d' H
; ~  {4 z+ w- @  D1 I, N( Y
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
4 C4 W: K5 b2 c
! u% N, E$ ]/ T! W* o0 Y" l　　 〈/td〉
" J6 |6 a0 l7 I" A3 L) j$ z' w$ z3 M$ P' {& z% p
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
* {8 P: W3 L) t9 t4 h% @1 k
1 J) J7 M8 p% R0 h, H1 U7 c2 n　　 〈/td〉$ h: B2 \2 ~: i/ p5 F
/ a' ?9 ]8 N' Z$ x( m& f5 u
　　 〈/tr〉
; A7 L: t. R* A' ]/ x* x, c2 f  W" q. c; `+ m0 \+ z4 R+ z+ t
　　 〈tr〉
- @$ M- F+ l% q3 M5 `
0 D& z# k( G9 _; K2 e　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
+ ~9 V) F, o+ A0 \8 d& r# @
  O/ V! f" s& j- [% J! v: T　　 〈/td〉# B- u( M6 `) ^

- e# E% B# E' g8 V; S2 G$ ~　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
% A# q7 S9 U; w9 E0 S" y3 s# l/ L4 P0 ?* W  F, X+ r
9 q8 M9 F/ F" C: j" K. k
　　 〈/td〉
' E3 y1 C$ c8 G$ i$ h0 S
$ D/ f; h- Q, z; T& O　　 〈/tr〉
6 S8 y: R# J6 q. m5 S# \) I; T5 ~
　　〈/table〉

晴天再现

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