标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
+ y& y- P+ I! C: q
5 w- z" W$ @! w
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
1 x9 \/ o8 S# Q8 z! ~6 M* C- q& ]
8 @. q& Y4 g2 j. ~
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
P& n6 P B7 L l, O) z
/ p# b4 {2 a4 P0 O- o6 G/ S
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
! v- Y* W+ j* { h
( f( q) F' a2 y7 d$ l
〈tr〉
* { o: j# S3 y. Y
& d: I' Z2 J1 e& c* C! U. k/ t
〈td〉
+ n' I0 L. i2 i* a* i2 c9 v# U
' ]& V: @( x! a7 C4 f" ]9 X
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
! G. D: N7 D/ T
( Z5 y) g6 T* B; N/ k" E
〈tr〉
T$ b8 K9 ~" O8 n& w
% V" X1 R1 F' a# M
〈td〉
b& f! r* J i" L
, F6 Y, I) a2 P/ q+ U
〈/td〉
7 Y0 e J, }# S- O. ~6 B5 M- y7 |
& P. v! Q6 `& a8 K# b
〈/tr〉
# @' D: t+ ~5 I z
2 B+ u- i! t& q5 N/ b, C: E4 D N6 o
〈/table〉
8 K4 [# ?1 n; G1 p5 D
1 a( v# K5 K3 W, h
〈/td〉
( F6 [# d8 I4 G+ W5 ~" A6 X
; s0 r* ~, |9 j
〈/tr〉
& R* Y* t* U: k- b8 ?
2 F+ s# M/ s# z/ X0 c( q
〈/table〉
3 p9 b7 t) y: ]* u, R& x" D
/ J( F7 _: T! Q3 V) ~* k+ W6 M
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
2 k; f' ?3 b5 |8 M: Z* j+ \
# e3 l" |. w6 m& J% i; C$ I
源代码如下：
; j$ R: P* q ]3 l4 w: o
' S+ C) x2 y2 v/ K( c# |, M
〈table border="0" bgcolor=white〉
2 \0 t" S/ ?+ Q
+ _% e) D# w6 d2 p0 F
〈tr〉
0 G8 H, j$ }$ p
. B- }* D* t9 u' U, f+ c
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
* M( `1 \% ~, @/ M2 ^
, ]! N0 x9 e$ \
〈/td〉
& Z5 H9 c5 s! T4 K- ?* W9 y) o: z
5 G( T2 |0 d5 ^4 D, M" u
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
/ R0 | ^% |- Q2 t* p
$ _1 m+ t- B4 [. F2 A
〈/td〉
# \& W. w2 p* z: ]4 j+ a& I
5 X, x6 q& u* K4 J$ ]1 Y8 c( @
〈/tr〉
* N; V! j' k" j4 x
; G6 B5 S# O3 D* E
〈tr〉
6 _, z4 i) v" v& m8 V9 Y
- U% Z. g# U) I! |
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
7 m U! N3 u `9 n* c( y
" X0 I/ E2 [+ l( S' T X6 @
〈/td〉
1 p$ H! T' { c1 E) y0 E
) O# N$ m; K' O( \
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
8 ?; {. z) L9 S5 d4 n( o
' L1 t# c9 z3 Z7 q2 }& p1 @
+ A4 A8 }' c$ K5 N
〈/td〉
7 U( V7 @& w" ^6 Q' z8 J
9 p. Y5 V( n8 Q4 e) y5 R) r
〈/tr〉
2 }/ K3 u! R& d/ w$ y7 u ?
I0 v+ f- v: i8 s- @8 `
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
