Board logo

标题: 在网页中实现细线边框的两种方法 [打印本页]

作者: admin    时间: 2008-1-19 22:20     标题: 在网页中实现细线边框的两种方法

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
. B+ h/ _  Q4 v  
( B8 L! L6 b) t1 O: @9 E' {  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。8 F$ R* t: _2 k; @9 J( [# X! D
# `5 C  F% B3 T9 C- `7 ~. a
  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:% {6 `* j# F' p9 c: j5 v, s

. F# s& ~' ~* u3 k  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
; V8 y8 e2 V9 _9 G8 q  E& d& j+ E% Q4 V# Z% ]/ W3 v% y# F
   〈tr〉3 I7 N( B, G- z) a4 L9 r

" L3 B( z5 Y, X$ X2 u   〈td〉4 L% P9 ^" e; x

  i) o/ }  c9 U   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉6 d4 W1 g* y% G6 ~3 O% X; z1 p( u$ F
5 j/ V6 l: ?' r, j) z$ H
   〈tr〉
3 o2 c6 a* Z; b0 {
: O+ `1 x7 t- E: m% }: z   〈td〉5 f$ j8 t  ]# R* v
1 Q4 e! M; s1 n7 o: M1 e
   〈/td〉
& a$ o' v( g+ V5 T! ]
2 B/ r6 l( a  p% w   〈/tr〉
7 V0 |% M- T: p' D: \7 Q5 E$ X  Q) y% m. J3 ^
   〈/table〉
  u" r: I# }% s, |. x
# [% c1 e% W# {% b7 o% D: L8 o% T   〈/td〉+ v5 @/ T8 q% S( K# X
1 m# ~  X3 {, Z# _1 T
   〈/tr〉
3 ?7 i* f5 h, Y6 @, M
2 C6 G" \- z+ H5 E$ a3 G6 W   〈/table〉
. E: {7 P9 v* L- L! B0 q. w  M
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。
( M1 p8 L3 a7 P4 p# j, ?  v
; ?& @4 D) |2 [  s$ d" }  源代码如下:
$ o7 Q* L( N1 i+ g" s% L2 E) g
  a% U% x) R' d: d, b  〈table border="0" bgcolor=white〉
' h6 e% K2 F& ~: y7 m6 h$ V) l3 d2 K4 o$ \
   〈tr〉
! }% j$ i$ H1 x9 l- y
9 V9 N0 |- ]+ O   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉& f3 t7 S# G- r+ b
/ r' L4 l, J; D) J2 I: }
   〈/td〉, L* a) t* {& T: F# ~

% X5 l2 H* A; _   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉# j) q; K' A% w6 |9 |, p/ y. v

" ^8 b/ b  b0 L, }( u   〈/td〉9 w  r5 h7 {3 Q3 L3 J0 E

4 K. Z) [) h1 a1 @" S, w4 P5 \   〈/tr〉+ h& F+ w5 y" f+ ^: O

4 z/ P9 d$ n. q; ?; v   〈tr〉
7 m1 d' e( a' U  v( Y# O
6 A; V) E& j, M( C( i   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉* ^2 ^# t& @8 E3 @

! n& b5 h" G+ U7 S) f/ ]; ~9 w   〈/td〉
2 U: k9 R, m7 D3 d3 w2 w% R3 l% E
$ I+ x0 y, A' M& j: B3 _0 Q   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉+ b+ Z9 Y8 |7 c7 D7 C% y9 L7 l
* L1 h1 C9 v; I7 Q: g( M1 ]
: X: |- s. w4 {+ p  o, e) l* C$ O
   〈/td〉# h* Q2 `; o* O# i5 x4 e  Q" p
6 z, W3 M% L/ b. |
   〈/tr〉
  P, A. C3 G# E3 J; K
, q( h( N+ ~, z; D  〈/table〉
作者: 晴天再现    时间: 2008-3-9 14:47

挺好的。。。。。。。。。。




欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2