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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。+ R1 k( ^8 s  E5 Z+ F! J
　　
; f$ T( p0 d+ `/ t/ D! s  q1 ~　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
+ W. {$ x5 F- V! x. N/ R% T4 s; P; A! A! G6 i0 r* L8 o) p: [7 p
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
* Q! @6 Z" f2 y& R6 o* r9 U6 [2 x% e/ ^& T* g2 m
　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
2 D4 A7 K/ E5 t8 C; \- P2 i
- f9 }0 J0 b5 o* F% K* r: H5 `- T4 P　　 〈tr〉1 X' d  l  O( z" l
/ n7 h( d* c% H" e
　　 〈td〉3 t+ E" B1 O- t2 m( R! U. i: |

8 u- H5 n5 o! @) D/ D/ ]　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉  ]2 F* l8 [' @- y$ ]# o

# h1 T: m/ j  Q( y5 R　　 〈tr〉6 o. h' [) {! |1 L
6 M+ f& @5 H" `3 R, F" k
　　 〈td〉
  E/ X, d+ H2 N0 t- |& T
2 R- I1 L1 q& ]8 [1 A$ _　　 〈/td〉
2 A1 R. g- f5 P& Q+ Q1 i( {' `
' D* X2 o& d# U- b2 S6 n4 k　　 〈/tr〉
7 W0 z/ [  r/ e+ v" ^2 u& w0 F& B7 n4 @
　　 〈/table〉5 t5 \2 r4 `$ z: u' f
7 N' h9 v& ^) S' l+ s' `5 e* S2 |
　　 〈/td〉
& H% F- q7 H# ~8 L& O8 s3 P
# n* w3 o) v" R4 ~2 O　　 〈/tr〉
/ z* C) a) e( H4 L$ K7 @) v# ?/ I$ S/ e( U1 p! p0 I( f' `
　　 〈/table〉
  r- o- a% V' F7 f" N
6 |# X' }2 t2 h0 c　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
8 W9 |1 g, E4 K: I, q, c
2 v6 q/ ?* H5 v* y* _$ b) Q7 z　　源代码如下：
# T+ n: g% L8 ?5 Y. O3 R+ C; }  F% y/ Z, |
　　〈table border="0" bgcolor=white〉( d5 T+ z$ B+ a2 {- c/ a

* Q( g3 E  n! t) X5 ?7 e! L8 f　　 〈tr〉
/ X- b0 i4 V: i
; y- W1 a- F1 Q  P* t5 w7 j　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉/ Z  h* N+ ~% @& _" D
8 `8 d) Z, D! \, \
　　 〈/td〉" x% j+ u: b* W2 o: D
- W( T# n; B9 `: d6 Q
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉  c. _5 D( }9 U1 e
( |9 L4 u. h: p0 o0 }7 a
　　 〈/td〉: e/ h: U; q! z$ @/ K8 a% |$ b8 A5 c
$ @- G& Z3 t3 G, a. e
　　 〈/tr〉
5 n" d8 R( b+ M3 }; K# s2 j" P5 q: N" E
　　 〈tr〉/ |: V" M4 f+ S
2 k1 v# n8 |3 d0 k0 j
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉, i, L$ y3 x7 f1 O9 K0 H

/ E! W1 T9 v" b　　 〈/td〉
$ x" L  |8 v9 q9 p' p! @( t/ Q. r8 w9 \8 i4 B
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉# F& U/ ?6 Q5 a! Z( J, K
, R! U. \/ z5 G+ k5 v4 H
; q/ ~& ]& F. }: ]/ @  _6 L- c" g
　　 〈/td〉, ?6 t5 g2 u( u6 r  I7 i
" Y2 c) Z) t* |
　　 〈/tr〉/ `' m9 K4 D9 R7 v) c& R5 n
4 `( p. N; c: \
　　〈/table〉

晴天再现

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