标题:
在网页中实现细线边框的两种方法
[打印本页]
作者:
admin
时间:
2008-1-19 22:20
标题:
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。
6 L/ J8 @2 Z- ^' f5 N
7 u5 V3 X% e# N5 Y
谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。
0 H8 q- h# @& E2 ^1 h4 N
- p. T6 H. e# Z; n8 d' }, S8 ]& o
如何用表格嵌套呢？大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspacing可以控制表格单元的额外空间，如果定义两个表格，把其中一个的表格背景设为全黑，然后在这个表格中嵌套定义另外一个表格，背景设为全白，并且把Weight=100%。这时，两个表格是重叠的，但是，如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说，黑色的表格比白色的表格多出了一个像素的外围空间，而白色的表格又在黑色表格之上，从而达到细边框的效果。源代码如下：
2 K' J9 B2 k+ a. q8 ~6 ]
: c8 ]. |, P; V/ E* G
〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
% N0 Z) D4 d/ `# C9 s+ J
6 L H( G, ]$ U$ d% b! B: B
〈tr〉
/ I3 \! J* Z$ s* y; O
O& Z. B" C: V! x |: g
〈td〉
0 b( c: v- _' L+ X( g5 R. k
1 G w; j, L: D1 f
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
@; C/ a4 C) ~/ Z
9 w) I% Z. [. ^4 F; A& \
〈tr〉
: ?3 f& |$ n3 v: H0 {
3 x$ }# F: D+ }' U: g c; L
〈td〉
' { X D3 w3 p( [5 |
u: W5 b; f) T% h4 H( T
〈/td〉
0 Z0 y: l* {4 V. z
5 h& D. \5 ]+ t$ t' i
〈/tr〉
. z; q: u I; P( n% D/ x4 N
n& P, d/ q! \9 y" r9 t: A
〈/table〉
, B1 J7 c6 H/ w
" h" }3 [; W+ Z' ~/ P7 K; j" A
〈/td〉
" V" g5 s. u6 ]1 o
; x4 U# K8 d$ Q1 N b6 L7 h9 |
〈/tr〉
( e- o) h- O- y5 f/ c1 q. S
+ F; h7 Z% V) L- i
〈/table〉
; U- e( |6 E/ Z+ W
. o% C8 V/ e5 P$ B$ f+ M
第二种比较简单，那就是用CSS（层叠样式表）强制定义，但是，有些比较老的浏览器不支持CSS，可能导致无法显示你所要求的效果。不过使用CSS定义，语句非常简洁，所作网页的容量也较小。它的操作方法是，在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;"，其中，Postion的参数有Left、Right、Top和Bottom，分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
/ i' h {, L$ m) |# u" _' c' n$ G4 a
! w9 J! `2 b. K v9 m# q
源代码如下：
6 v% k0 W+ U% r0 d9 ?( O
9 ^$ d7 F" m$ U# S4 \8 B
〈table border="0" bgcolor=white〉
. p2 I; B! F9 N* L# p4 M
$ ]5 b% J8 ~) ]2 _# h: G6 ]- M
〈tr〉
9 C+ q/ v T7 u$ W+ C# s8 F
( X: e8 P4 L) p0 @( b! B! w
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
: M4 u0 o' t; i: |8 ^: e
$ ]1 p; o- N7 t5 Q. B; r; ^
〈/td〉
5 u0 r$ B* _3 V" \; t2 F' L
: Z, `' ~8 M- v6 z
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
; ~" O+ I5 L e+ d4 ^% D% L
8 B9 `, n6 o+ L/ z; ^- e
〈/td〉
+ K9 q4 v8 S* T4 Q2 ~9 M
: j& `7 c" _9 }) l" e; L
〈/tr〉
* U$ N! R' [- q' d) y
' D/ M& J. D! w# W1 g$ a. F: S
〈tr〉
4 f1 k$ |8 C3 ^5 e k/ y
+ ?5 ^9 Z; J) C4 [9 w+ @- F
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
* b; V8 k9 k9 E2 d- T7 E$ @
: X( [" }( I1 d/ R; w
〈/td〉
: `/ I- F, [5 ?" s+ h5 `
! `% i( w7 c M% ?$ K; H
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
9 Q0 W3 k. g! N, U
* l9 I4 E% y' A& x" n
4 d5 H! ~& d+ Z4 f, S( D
〈/td〉
5 l/ E+ N d D. \
% m+ q) }; g" ?) b8 @0 b% K
〈/tr〉
% |1 k8 h, N7 z* a
# Y; B& {6 R6 D# q1 F) o7 D9 E
〈/table〉
作者:
晴天再现
时间:
2008-3-9 14:47
挺好的。。。。。。。。。。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
