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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。) ]# |- u. {) O
　　* g; U, b" R2 _' F# u0 ]
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
$ \4 _# I. F: R+ E
- G1 J: |' l* S5 G* A　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：( q8 G( K( k: i4 ]1 g) m# G" H

5 \$ p( ^# `% t　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
  L" T# u4 e8 _1 R! {) f. L. ?4 ?- A) H
　　 〈tr〉
+ K" j8 m: p, f" o. n
& ?' c/ [, d4 h+ ?2 ~" ]- u　　 〈td〉
% B# P' O6 G4 d+ m5 }8 X
9 f, U9 Q) V' p- d# ~. J" @　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉, [* W* r& P- Y6 c5 {8 c: `. q0 @

: c8 O$ y8 y4 V+ X9 W　　 〈tr〉
3 f; \9 r, M5 Q8 J9 g* A% f5 e" ?% B3 g4 ^0 K
　　 〈td〉0 l( d' R. q9 |. J

7 J# Z1 r# R* t: ]1 p& r2 P# @　　 〈/td〉" s# `- V9 K/ ?

4 K/ A* X5 B% ~* f& g　　 〈/tr〉% T' O3 B: w  K/ a4 c( n$ V/ B& G, `
. ?+ [2 h( l  l! c1 R: T
　　 〈/table〉
( V) h2 V$ U- y7 T) z+ V( S/ d/ n5 e
　　 〈/td〉9 m4 S  U) `/ A& H# A# P

3 u* n  B* f! }! J2 p　　 〈/tr〉
5 {- ^  G( i( I/ q% C: |) S! N) i4 ^& X
　　 〈/table〉
: \! A. B1 u' |* z6 G( {9 O- R4 A$ M7 a% `7 P8 A, m
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。" _. x1 E7 V! M* A3 a
7 |9 g; {2 `+ v0 d! V; O2 w" W
　　源代码如下：
$ r+ x4 d% R% B1 D, Y. J  `1 V4 g% a
　　〈table border="0" bgcolor=white〉9 G3 B5 l) s8 s7 _$ y

8 s6 p, b4 n3 j0 z) [　　 〈tr〉- @/ i& `' v5 `* h2 P" t
! p/ T; G9 n; @: l
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉5 X/ k; b' c' b, j# k8 r/ c
$ E: r$ D1 j2 S) C+ N; ?  A9 U1 \
　　 〈/td〉7 I1 H6 C- P, [( D+ s
) ~$ u9 M2 j0 I8 E( R, X
　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
; W" y1 M2 v* J8 G6 f/ Y4 J: z* W- k' \: K/ R: Y; u+ L9 _
　　 〈/td〉
7 l% J0 \1 Q; W8 H% Z
* j* g9 H0 G. s- p& X) p. K　　 〈/tr〉1 {: d0 w* e' H1 i) U8 d; f" i
2 k- S' j- M0 a7 H5 g$ M
　　 〈tr〉
) y9 {) k7 S& S& S% P7 L& s& P% E: M% W' a0 H: J8 F
　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
: N" ?: {, o* w4 L& h6 j0 @
  u/ ~7 }4 H5 \3 y" J　　 〈/td〉* C5 c7 x9 c% M! [4 q& }) {
) V/ L2 T- ?: a9 |( N
　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉5 o6 T+ ]' I8 G
6 _) O$ Y' I/ Y7 Q4 A; A; L

' Y# h0 k* @. P: a& m: U6 _) r  ~( s　　 〈/td〉
7 k! `8 q# v6 r; R: T
+ |: _2 o% V) l( ]6 A! ]　　 〈/tr〉
  R4 }1 e' p+ h' I" q& x
: W' W# y5 G$ z& b8 J" c　　〈/table〉

晴天再现

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