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

admin

　　很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。. o' j" A( W. |( X. W
　　- y4 |9 p4 O, d$ z
　　谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 U! f  X1 h- I# p
! j! K3 O0 q7 f　　如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：2 x, g" s" t* }+ F# x* ]3 ~

1 H) K2 I/ |( L　　〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
0 c4 C0 P1 S8 a  P, P
0 z0 B* C9 |* k+ u　　 〈tr〉% n: P& e; X9 g: |/ J
( w1 t* ^7 T4 Z* `: I- g
　　 〈td〉% |# V9 D# r/ z2 c

1 ~3 y* @1 n4 L3 C; J' r! h　　 〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉% [. X, y" D! ?) P. z  d+ n( Q
# T: y3 ~; ?. n, p
　　 〈tr〉( j% T6 E  R9 _8 x$ |! y; C& ?
% T# H0 f# W# Y7 H
　　 〈td〉. _) @: T* W4 v- ]. W3 k% p+ I
/ y  A/ K% X9 z6 U% \* b; ]
　　 〈/td〉7 {" B* {" y4 w; j$ b
0 ?/ L% K8 u8 d% \4 D/ t, E- U
　　 〈/tr〉
8 u! U  n6 K% `" o% ?- K* u7 l& T, m
2 ]7 j& X* T" O  p) w　　 〈/table〉
- S% U7 a" Z# l+ z/ W
1 c- V% ~/ R' I　　 〈/td〉
6 z% R4 F4 I  R, Q: |2 F. Y
1 q( g  {" `) F, v　　 〈/tr〉
7 R. P# b0 L- [4 k5 g# y: T2 _% s/ L( m" g& l8 Q2 U
　　 〈/table〉
0 {' U: z  w4 u6 _. e* ]/ e/ z8 S' v/ U
　　第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( K" v0 E! j& |6 o
$ V6 `  T; P, Z  s$ `; J/ {　　源代码如下：
8 {* Z% T( q% m5 f: h! B& W2 Z2 m' r  F; J
　　〈table border="0" bgcolor=white〉8 a* W9 U5 a: {

+ ]* A2 Q6 @9 n8 v" B. J　　 〈tr〉
' B( s4 g1 o' j2 {# o5 e% c6 C+ K4 \
　　 〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
- r5 ?& Q: a# V7 a6 z" y+ f8 F: ^; y$ L9 R5 [
　　 〈/td〉! [- q6 H! C, ]/ m3 s

* T( p! D+ U" q) O. p　　 〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉( w. C, P  n6 @3 J& `7 B# S! X( ?

  u0 E& j! T9 ^$ K2 K3 E6 ~+ E" [　　 〈/td〉
. s  r; ~/ N: ~3 a) g  l
# |5 c# ?: t! n$ V+ ]/ V　　 〈/tr〉! \, n0 u( g- g& w& ?

4 \6 J3 Y8 k: S& r4 U+ b! o1 A" g- S　　 〈tr〉- q& H* {8 e2 ?- X6 ^

9 x7 V4 u% L& v' f7 `　　 〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉2 u% ~2 \$ _4 }5 M. q4 W

2 |* U/ b( [+ \! `9 w6 M( m　　 〈/td〉$ H) T+ P$ t5 r1 \

: Y0 N9 e! i. C% y) x　　 〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
+ W0 I3 f- ~- F5 f4 Z! x9 R" Q4 I' P% c+ ?& h0 D9 z

6 P" [6 u% P8 z$ F$ B$ R7 H% g% }　　 〈/td〉
9 c* B' J7 R$ o  l9 q" ~) {3 `( D, M
　　 〈/tr〉# e, z7 K/ i7 e# w" L5 n8 T

. p4 ~, l8 O" s( U1 [' [2 n! c　　〈/table〉

晴天再现

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