标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
1 n6 d. D( e2 }( ]0 J, `1 @
' i, c& \( g; ~& w
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
" ?9 K" u, K8 B' z4 R/ n. G; `/ {9 w9 {; a
# v/ n8 S% @* Z1 \
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
% h; k/ Y5 E: E& r3 Z9 @8 d
- s0 l. m$ l/ k! |2 M
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
# P0 Z+ Y) h. }
! p/ A' D" e& @! e3 H/ `
〈tr〉
8 o N9 b4 A/ E) o
5 a: g9 W3 s, m8 F Q! M" s
〈td〉
* T) {- I# k1 Y$ ]: U$ K, Z
0 F( @" m5 y) j3 t" b1 x. o
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
/ E8 V! Q5 }# l
) f. ~% q( M' _1 G) B0 R0 J
〈tr〉
. u7 H: r2 E6 A9 t: C |4 P
4 ^7 s. H+ T/ K: \1 K6 @# R
〈td〉
V# G5 h6 J" C) V8 Z$ ~' T/ h
7 J* a9 f0 J! i! S9 \
〈/td〉
2 D; _, x, ^( t) { k( K
* B. V/ h' f3 y+ @
〈/tr〉
9 c0 H; G/ f9 y& b
: ?4 {7 i* g/ f1 w" @( X: ^3 u
〈/table〉
& `5 g+ Z( ]! A8 U$ v
0 @2 T8 z* n5 t* T3 {6 ]! m/ @
〈/td〉
0 d+ E2 U# R# E# ~, E% d% A4 o
" \+ ^ O0 u; B, F" e; r5 A
〈/tr〉
( { i. O5 E+ Q% Q/ O
7 h( u5 A* @7 ~* z8 q' I% y8 @
〈/table〉
6 g) o! E/ e A2 X
- |, i# B2 f( R$ ?# Q. e% X, A
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
# x' O& x; \2 P/ D
7 [. x, q% N. A! H6 k! x( e# Z! T
源代码如下：
) g8 r; U* c4 A8 {9 I
' w. |- P: Q4 p0 m: F9 d5 r, p3 E
〈table border="0" bgcolor=white〉
* ~% D$ G# Z3 x$ S
6 ?8 N) }3 J7 G+ }/ k4 q) C
〈tr〉
' G8 I: x- m- o5 `/ C8 E; ^
' S# @8 c$ y. y1 N u% V
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
$ V) b0 \2 U$ c9 Y, ~( p
: h8 e, {; u1 t/ G# ~, c
〈/td〉
]" x9 g6 P: K! B
' B, [1 C. j {, Y' j% d; \
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
9 x" ?! k) Z- v$ ~4 b, e1 y* d
3 Y3 K4 `0 S2 U2 \! h
〈/td〉
' c8 Y* O: ^4 u2 I4 n" J( t
" \1 G) x% ]" M3 J+ g4 e5 |8 F* }; O9 k
〈/tr〉
- G. B, V1 N" i' H- {" p/ z2 u) q
7 Q. j" S8 X7 w0 \
〈tr〉
. ~ l/ u* x% l
4 Y- I* S) D* p& r+ G. y+ x
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
& S+ g# ~! j7 f, j* n4 y
" F/ k; B! [* b3 k8 l# f) x0 ?
〈/td〉
7 u$ `2 U+ ]* c0 e: T- ^8 v* K) p
" F' f/ K$ w) C; D: V8 \. |# I( G" k
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
$ d4 X/ D4 O% A0 I! z/ h( l
' _; N% |+ I5 b% _: a* v
- @3 C. \" n/ A9 O' L# X
〈/td〉
/ `* p+ A q, W) `& f9 u
8 d) Z' C' {9 [; J, r# k# ~
〈/tr〉
, \8 k0 g( M) B$ ]
/ l$ }: g$ p# p0 ^% u
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
