标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
, T |, J* C3 ]( Y) B4 u+ j6 L
0 f7 G+ C4 T) `! k2 V4 A
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
2 @& Y# N: ?4 Y; c
6 g" }2 o# M, Z2 R
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
2 s. i) P/ C. i/ E8 {8 L* ]; @1 p
& s- a: O7 \* d7 [ i- C
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
/ l8 a! W8 r5 U% l% m" |( n6 s
$ X- w8 }3 ~( _; N. M+ \
〈tr〉
' Q" K; q9 S9 |! l, k4 [
- @5 {% C. b9 Q! o
〈td〉
$ K1 y4 e s, N8 ~: C
1 K* A; m: S+ r/ _. N5 W
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
: R1 c( w4 }. U9 K
1 {1 T9 o5 H9 w# I+ W( m# C- a
〈tr〉
, I! M6 R; v) n3 m+ q3 F
7 a: r4 x! v( i$ q5 ^5 o+ R0 H
〈td〉
* j9 S( Q: Q& G% m0 v5 @8 c' R, |2 ^
& l! r- H; p: _! G* l) b1 m
〈/td〉
) ` w: L& L0 B7 ^( G
8 u- m6 e# a) p- V' x( C Q! G# D0 W
〈/tr〉
3 Z2 H+ c4 {3 H, `$ |/ q& D' Y
% `: p' q- l. h$ {( }$ @
〈/table〉
" ~* J, Y* ^; t/ V R% X
$ S& r$ Y2 Q9 D# s( [
〈/td〉
9 ]" P; E# ^' i4 p( k" i
6 W# ?2 p& l0 c) W: M' n. @ i2 @# T
〈/tr〉
; P+ A, ~2 s" \2 z& X$ k6 F. X* T8 N
1 D) c9 ?0 ~5 n: d; g' g" a. ]. u
〈/table〉
& k n' n' }3 M/ d d( ~
' f, c. |1 f! X3 y- Y) b- t
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
$ I1 D0 v# _9 H9 B5 r3 Y
0 }+ G3 p" }6 ]: Q
源代码如下：
# k1 G) v' R, y9 V% d
4 b2 f, }& q- b. [, E
〈table border="0" bgcolor=white〉
7 G" `7 ?" l) h0 E+ G
+ u k! y/ P: g: a- r! F- \
〈tr〉
4 H4 H" x: x4 G' a! d
, o, X" `0 ^" Y7 @8 S9 m s% O
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
) }% r) X. w. I% K, Z0 s
. j, J( w3 M ^! ~9 v$ G8 H5 \
〈/td〉
( s: W7 ^6 k. p4 b; q
. B+ Z+ g/ p# W. W9 u$ J8 o; K5 Q4 F
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
: h3 m* E) f' Y5 Z
* s+ k& Q3 ~ Q5 c
〈/td〉
' n* t( p- ]+ C+ x
/ ~0 X( ~+ w/ `( P
〈/tr〉
' H& S& i; h: Q0 h9 O0 i7 M- U& d0 N" I
" x3 y0 n* J% \
〈tr〉
7 b! L* w/ u \$ q5 i# A
4 q, `5 s) e# `
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& _# O" C' c" {( _
$ d" ?% O! m) Q+ H: f5 w# c3 c- n4 m
〈/td〉
% t3 e8 E% o4 c8 s
; P( o1 V }( R3 W2 _
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
6 J, r* [# i3 X4 W1 B
1 n+ y! x+ y ]9 U% i* l4 s
7 C3 z" S' |" {1 d6 L
〈/td〉
" E' w3 g) i$ T1 `" g
, h/ O- V9 B! @3 F# z) \/ B
〈/tr〉
% r* Q7 z% P$ |8 k$ s2 w9 t9 b
6 N) ^" h: @$ \3 K; }
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
