标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
; z' T7 ~, o' ^
( J: \4 `# F; _' |
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
; m. @+ F# X% W* Y
3 d ], f: t) q! C4 K" k7 e/ f6 w
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
9 R/ I [/ Y/ K4 z. k. \
' G" u# o9 K$ {0 H
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
0 Y+ g: M, l8 _4 J9 W' ?' o
& a3 L4 y' s0 P' Y7 c; E
〈tr〉
$ ]1 D' d5 V; G' h3 ~
3 K% p. x, X2 [5 E7 z/ z
〈td〉
8 |) A' L0 l( f
* z" S# k- t! J! a7 t
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
* v5 g4 e# m$ ]6 n7 v! O9 K$ t, V9 Q
# m* Z( ^. `' F4 N9 X2 H( y. _. N2 ~
〈tr〉
@' [6 E G3 w" u2 l2 {
1 j0 _" E6 r% M7 u4 Z
〈td〉
+ p- F% { J& j0 J
( U: z* R! b: ^: _7 Q" E9 T
〈/td〉
9 X6 F/ I$ y& L8 w" o h. Z
' u# _$ b6 S( b& G
〈/tr〉
1 Y t" x! a7 @' j+ ?% o
& o# t ]& H8 J
〈/table〉
6 I- w' p( I0 I! i2 @! B1 o
% C+ v! h& G4 M# l3 ]3 l3 J
〈/td〉
# M# v4 U$ S6 ]5 D1 _
. H+ k& g0 e) f" x) x8 t& z
〈/tr〉
1 y# ]) ]6 f1 p3 m7 C
# ~& _* f9 I/ s; ]# v- g, B
〈/table〉
5 d* y$ g% e7 d% q. v! ?& ^2 q
( S' n8 a: B. k2 `
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
3 ^" d( e- e3 Z* G+ j
, y e g" n5 R0 {
源代码如下：
1 w- f' ~4 Y+ e
% B! u6 V% z3 X9 h5 }$ c
〈table border="0" bgcolor=white〉
1 I' L$ Q8 S6 i+ F4 a |: m
! X# t" C& V- T7 K
〈tr〉
& k! a7 q, G* F
7 L0 W" N; w5 i. L7 |7 K' j, t
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ `* t$ Y& C, a4 Z- j/ V' j4 f& b, J' _
& ^8 k& a3 J/ |; \
〈/td〉
! \# B9 L1 t$ S* E8 \
, z6 s$ H6 a* Z+ h0 |4 N$ S
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
; v) g% I1 B3 j8 J1 S, [
. o& \+ r4 J Z
〈/td〉
# B. `+ @7 ^: [% Y7 l/ B# H
d$ ?4 v3 q# |9 W4 w7 N$ {; ^
〈/tr〉
9 R/ y+ w% ^2 A# _4 k* v, o
& D1 a+ k( Q9 m: M t
〈tr〉
* \* [6 F8 @- t" F, S5 o
, |$ Z/ y' s9 F2 L- N6 I% ~. L
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
3 r" {! o4 M/ E, f
7 C* k$ T3 h( a4 s+ X& {
〈/td〉
4 L- M9 q0 e& p* n3 {* d! C2 j
$ u3 m# w0 z! i8 V- ~4 T4 @4 R) |
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
8 X" k; ?+ e6 c9 P
" _" p: ^, L h( I! H# d2 K. k
: y m$ u$ t2 U& ?; @2 P
〈/td〉
/ J% Y1 Z8 [# p- }
2 Q! P2 W. y2 S* {: e/ P) F
〈/tr〉
) ]) J4 T2 C/ ?: C4 C: [6 H% T; S9 b
0 d1 I @& t& ?; e7 V, m
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
