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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。! g/ E" ^3 F0 W* z2 q
　　
4 {; \+ {! u% w/ b; X' f  T# @　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。. u( }! u3 ?2 l  ~/ v. U
9 `+ Y/ q! a- N. o( F3 r
　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：+ j. [  B% B4 e: I# ~. @/ ]$ a

4 e7 U) r( v& |+ R3 J7 f: Y* n2 M0 R　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉* y# T# F, S) M% `
$ T3 k1 K* O+ N# q4 u+ ]1 q* W
　　 〈tr〉
% Y, A; Q* T# z, z8 {$ p
( w1 d0 A1 b# p$ @6 X" O" A　　 〈td〉
$ z& \! p; E+ X' C  Z- f' t/ M. d
　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉- H6 O9 E" n& }0 ^
: {+ o* ^2 B' K5 Y+ O
　　 〈tr〉: J3 L( V: M: c: Q) g" |
; a# ^/ S9 u  T/ G
　　 〈td〉; @" V; U9 e( Z( C
" O9 a( |: I, F6 B- Q) ]9 x7 V* R
　　 〈/td〉
% E8 ^# A; ]5 c; s
# ~' Q" v! U7 L' W　　 〈/tr〉
3 g0 r4 Q' c: e9 U7 ?4 M" L8 p9 p
2 K* A6 W9 D7 o( S; c* G! z; y　　 〈/table〉
; U9 W4 A9 K9 h$ v& p! b
+ y5 |; N' d$ _4 R6 [! d4 a　　 〈/td〉: _2 u8 x9 b+ {' X. p

* E8 P# k6 |% W& l, n　　 〈/tr〉. |- \7 {+ n- e8 S: h" W( S
# n9 q% a' N; g4 P+ f0 b# ?
　　 〈/table〉3 X0 K% e6 P! A. ]: C; [/ L

7 m4 e+ O1 j# H3 R3 h　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
. {, r* ~8 f. \, G2 v" e7 ]$ M" o! M3 f: }- l9 K
　　源代码如下：
/ W  }/ m' J$ D8 T
7 s3 [$ r9 g8 ~8 W5 ~* s1 n. t# E　　〈table border="0" bgcolor=white〉+ c* n3 q8 x- \  d0 p$ F1 a
/ R/ o# B7 ]* W1 \+ ]) N5 M+ p
　　 〈tr〉4 O6 I' \/ v9 t! i" f9 O
6 O$ @) J- U6 a& \' \! A& ]; U
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
/ w- Y2 B  W0 D# p4 [1 ?! {* q' ~' Z4 f4 A2 z6 _; C" q
　　 〈/td〉
7 u; h: w4 a2 b* K* G( V$ M, I$ c- M8 l; \  x& _3 G& k" @& \: F
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉# F% p9 Z# r' y" Y% b" k
1 T) s# V" F4 m( h% @  X
　　 〈/td〉
+ Y% d2 P! P3 S; f* n  @
" M, Q% D$ a4 T+ `　　 〈/tr〉; B% j" f: ]. F; E

! t* _$ P4 `. O1 C8 Z　　 〈tr〉5 }) K" A$ E4 ~7 D, U3 [7 y

3 F! Z# Y* {/ l) Q　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉; |' `+ y' C* J

6 r% ^7 e, @: L7 j: K$ [, J, s　　 〈/td〉
( E3 ^$ {% i9 M  J  R3 x5 E2 K- I, F( B& t2 T
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉- L- w, T" A5 W
/ \8 ], q/ g: V

6 q1 k! p  T& E' {  ?　　 〈/td〉; {, v# p3 _) b( P0 _: H# Q
* L- [2 ^$ H& [' S. G0 Y) w8 k
　　 〈/tr〉9 r! _% [% H8 Q" I/ o
& g& O8 {2 P- \- z6 j" K
　　〈/table〉

晴天再现

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