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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
& w- v, _1 R( a, Y( {) Y2 G  ~　　
4 R5 j9 }  e# i; g8 J　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。. U6 A0 D: E) m6 d" U; w& b

8 u$ E1 P" N2 `4 `. ]　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
, h: [' @/ N0 w9 Y6 z
2 p4 E  \+ ?1 [+ y- [- r) w( s　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉( F& I8 {9 C/ |+ v, b/ R
& v( Y9 L* N2 C3 `( p0 U
　　 〈tr〉# q) P5 \1 z/ `% G/ `
) Q6 A1 K( h: b- p' w- k
　　 〈td〉
: D  S* _# m0 c
, x9 R, X' D+ j4 x9 B1 l3 Z0 t　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; G# k* R! [# S4 \- A( d7 s; G- d7 \0 k- F' x; J
　　 〈tr〉
* I: j% w5 P/ K* ?7 Y+ C% p& f9 f& h1 r
　　 〈td〉/ Q8 t  X9 {7 i8 ~5 W  J, c# `

" H4 b1 e( ~+ s6 n( o6 U　　 〈/td〉
0 L3 z9 W! q+ R5 g" I
" u* h8 f) ?* A　　 〈/tr〉
) i; y/ {" \* {3 L9 }5 \
' X) T5 C9 z0 L4 P. I, _: ?　　 〈/table〉
3 t' S+ N' D: s  [, _3 h) H5 c( ^7 i5 V' E. Z: M
　　 〈/td〉
0 B- S) c) E) b
% {) A9 U& \1 e; N　　 〈/tr〉
3 y' h/ ^& |8 Q! O# p9 q( x, N% i
  `, ~' l; m& |# _" `! H　　 〈/table〉; i! A4 i+ W7 {8 ]; }
8 z+ Y. x) ?3 g3 ^( e
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。( L! p: G" J/ j/ q7 u- y

$ h1 M+ p3 o! E' X7 K* i　　源代码如下：
. E. o' R) Z: ?- _1 n- v
5 O8 B; x* y3 Q2 Q3 y6 ?　　〈table border="0" bgcolor=white〉
9 ~4 A1 a' w6 A  ~& q
0 M, T2 Y- c+ Y, Z　　 〈tr〉# x: f& W. d( b. v/ p) g3 [
9 V( `, s1 W; C' l" W) X0 J0 B
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
3 Z; r& c7 C* Z
/ _: ]: H! u  _: W9 v　　 〈/td〉. }  l$ [; l* S+ k" y

0 ?6 ?6 G2 l& F　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉1 d' w1 c/ U3 b9 v! ^
% O  j5 j3 m  [/ ~9 T  {
　　 〈/td〉' k/ N! h; ^/ T2 C" F
8 {& C+ k# I& ]+ N) s
　　 〈/tr〉( u  B0 z  `- {* ]' e
# Z% i. I+ |8 {- U2 R# O1 Y  R
　　 〈tr〉) J: ]* F1 f/ ]& q: y5 @2 H9 H
" M' L: g2 {# _9 J8 b+ \
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
8 V- y7 W, z# h  D  m" J1 H0 [; u! M) I( w( R
　　 〈/td〉1 Z3 U* k  g9 p8 l
2 v# g4 J- z( Z3 r, Z7 m/ w1 d# F
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉7 P" M' |0 U* s

, K+ D6 Q" @2 p, n8 m" L
' W1 w- O+ \8 e2 r. p( Q5 z　　 〈/td〉% ]5 d# `+ E$ x' m) @
9 N4 x7 K6 R" l0 l+ ]
　　 〈/tr〉4 i8 C1 o5 i3 B3 r3 ~' T5 }
/ V2 C) \! r) \3 }6 e; g" X( d
　　〈/table〉

晴天再现

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