标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
" Q; d; j Y$ x+ a- N3 c/ {
' v1 T" [6 ^" R3 J( X7 I
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
% [8 f% V2 A4 E7 h
. w2 Z- ^/ }0 m) P% K3 q
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
: u d( W/ n9 ~ J# _* R0 E' [; _9 F' e
$ ]0 S2 ]7 l* z
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
* w' \+ ]0 t! l
% Q. |9 f/ V3 o$ u! h
〈tr〉
: M8 m! ?0 I0 u( ^
. s1 D$ ^) X5 f' k' v
〈td〉
( b' G2 V- {- b3 h; @2 r
# S& V# a1 \. x6 i( C/ Y
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
# u% ?; T6 `0 e$ H4 p
0 J& q: Q$ ~, N
〈tr〉
$ H' {. v% x" m/ e# d0 z
/ d1 m7 N- k3 ^7 N# t$ r
〈td〉
+ P% \8 K. B+ v1 j7 [+ D* o6 B
$ P0 k# `' L' F. ~* Q9 @0 k5 u
〈/td〉
1 g! z+ F+ W) s# ~ d @
- K8 D0 @* K8 | D1 Z# i* i+ T- B6 ` L b
〈/tr〉
7 y1 a0 C2 t/ j! f
1 d. l: T1 _1 T
〈/table〉
m3 K+ N, a6 ], u: v. V
5 L% @9 v' \+ ^4 [+ }
〈/td〉
1 b/ }9 d. h' L! ~8 v6 U
* V" q/ n4 i! [8 G8 _, P( s
〈/tr〉
, @) F6 F7 t$ C! B" k
- _- R$ i+ n* ?: P
〈/table〉
5 g4 e$ E0 [) z
. H1 h! o. G$ y& v$ f/ O
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
4 u/ h7 s( {/ _; ^6 G
7 d! L* d! h3 E9 y+ e
源代码如下：
0 m3 v) I2 w& P+ s0 x
, e8 f' s, i7 u' @. }- U
〈table border="0" bgcolor=white〉
/ o1 @& \" l2 g7 z/ O/ B% i6 t( g
1 v1 |8 H3 g, s6 u
〈tr〉
/ j2 C- E% S7 z3 M! F3 o0 U
6 y1 W: s# G4 y0 P
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
% X* W" e; O! n5 _, Q
/ i# U+ y3 ^/ ^+ X1 k
〈/td〉
$ G5 q% v/ I* C+ K. V- f" v) i* }0 j
" s" n5 n# f) J8 c' o7 _" f
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
, j* B8 v4 p/ O) \
& d' a6 g1 a: Y: `3 q2 k& N4 P
〈/td〉
+ W$ b: ~7 Q2 a! G2 Q. U
! e; b* M" ]2 q( L0 P
〈/tr〉
8 z4 _ Z9 P% x3 D" ~* z
) a/ R* b! |' x% {! Z! R, L
〈tr〉
1 H" E% ]; |/ A; W
, u' K) I5 ?7 c
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
7 p. T" N$ h+ P' J8 [$ |
! q2 A1 N$ M9 a* M) S, c
〈/td〉
8 r) |4 v4 c1 Y8 }+ W4 W
( I6 K: o/ j9 C) B2 e+ ~( \
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
1 w2 y! m* @; V M
$ \0 b& N4 A; j% M T3 ?
8 u$ }6 M; D1 ?
〈/td〉
7 ~$ ]- E" v O7 H/ a
5 H& A2 Z: |' h1 }$ S9 K
〈/tr〉
( i4 b2 V7 I. [* g2 K$ o
6 B! w1 `5 O/ J
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
