标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 S* M! s4 x. M" h. F; `: s
. w& p7 [- s) u, M! \( ~+ k
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
S1 a4 o+ ]8 t, M0 D9 k0 e
% N4 V& A2 F% \2 c1 v% l
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
' H! T4 E/ u3 q5 h" r8 n, F S
, e; y% ^* _4 z9 u* j
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
1 N I0 F- T* R2 d* q
$ J, Z! d- e3 F* l) M* x7 ^
〈tr〉
M- x4 T( B' S5 p- k' W
. q4 c1 t* A" _7 e, \- S: M
〈td〉
; c% a" n* j+ H: q' ]
1 w: u, Q- c9 `5 y1 S
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
X4 ~* Q$ O/ j3 p3 q0 S
" {4 C7 I$ N" o3 h0 H
〈tr〉
/ p5 {+ w ]$ Z
% Z4 m, x. I# i3 n* o l
〈td〉
* d4 V% T2 Z5 T& h; h* \
8 h! z+ V2 r9 K2 z* N4 H
〈/td〉
# P+ |' e k6 l- |9 X+ ~$ W1 w+ l$ _
2 q3 A. ^. r; O _4 n% p
〈/tr〉
0 B- e, Z6 o7 f
i1 C! `! Q! ?/ d+ p
〈/table〉
! U. G1 R" U6 Y1 P, m* V
8 W7 M( k" ]9 N1 J' Y) h
〈/td〉
9 ^8 `8 o8 _% g% f E7 s
! h4 V2 ?. Y4 \
〈/tr〉
/ K; z2 P+ k- D) | O
3 c3 I* w5 | l; K$ t7 p
〈/table〉
2 G4 U; Z7 V# ~1 u3 @3 W+ Z
3 C/ ]2 d: V6 \, G) O* U+ }
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
) z" h# b- w8 V2 Z x5 C1 g* H
4 C3 l5 T( R) S/ B% P
源代码如下：
/ Q! ?& w t+ e6 e R
/ D+ g5 a: ~: g- s b# G
〈table border="0" bgcolor=white〉
8 }- K& S/ ~/ y( q4 H5 i4 ], l0 }
9 m9 D; _& ~) J d
〈tr〉
3 H7 Y& j$ {" S4 B( s9 C! I
* x5 f" a5 `6 t) ~
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
6 ~! ]- i0 d2 H
2 K* ]7 m+ F: t! w
〈/td〉
. b4 L' @8 t2 M7 w" l6 M# L# d
+ v7 ^) S6 m# G
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
9 R- x( {# ]2 L( z4 ~- Q
2 k9 u/ }; R% G4 A# d$ Q& d
〈/td〉
6 a7 n# D& o: c3 V4 ]8 r' X
# o! @- `. m5 `/ V7 ?
〈/tr〉
2 L6 g2 \( y! N/ t7 ^ G
: A4 j7 \" v u- O! h
〈tr〉
- h! ^( [& Z K; V( e7 l7 u
8 ~! ^" {5 D2 \( V/ e9 U+ y
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& r3 w4 m$ }* ?# T; @
! ^4 K4 }9 P+ h% y
〈/td〉
" \' Y0 K$ |5 x0 B+ X
/ W% P$ t2 ]+ d1 O! e) T$ x
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
; N, L$ V8 a3 o" S
9 o. d9 O0 b6 i/ b0 i7 H
* Q) P$ U! u3 K* ~' W3 H
〈/td〉
+ d9 E& L# |- H* G5 O
- z7 L' v7 Q% O( { Q0 {5 `
〈/tr〉
" r3 o) _" A5 a( r- z
* a5 s$ G( O5 a4 V0 D+ A
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
