发新话题
打印

在网页中实现细线边框的两种方法


朋友别哭,要坚定自己的信心,我们一路陪伴您!!!

在网页中实现细线边框的两种方法

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
6 P9 Z; P; X1 @" X0 R7 \5 Q  * p/ |( y( n" W) D' d6 M, t& K- M
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。
. \( U3 Z: P1 F/ P
3 ^8 [! g' V7 S  如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:
+ e6 U# X* d6 d. Y0 `4 z( i1 c4 |4 E5 H1 M3 L
  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉  P3 D* p5 s' Q

1 S+ }7 T) b% Z3 e- ^& A5 y   〈tr〉" a9 `2 s% F+ B' i- N2 m

8 `4 S' h3 P/ v   〈td〉
. e0 f0 I* N" }$ Y" E- X$ V$ r7 x# V/ n6 l1 ~
   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
; p4 f# Y6 q5 F* B( K6 H5 g7 w
4 {* n, `* E( o4 {: ?   〈tr〉3 M: y2 k9 S! F2 g! C6 [
8 X2 m0 W# a, F9 `% a% R
   〈td〉2 t5 |3 C  e; \# e* f6 O5 N

0 D( e& j2 ?" o5 q% Z1 b   〈/td〉) f) N" P8 _" ?% o

4 M1 L% A* c* f- `   〈/tr〉
) p% f+ E; ^% r  x, a% r
5 y6 L! V- f% R0 j5 R   〈/table〉
; x% c* K( G( g6 p4 E$ `5 d/ ]+ t; }! H
   〈/td〉3 l! \/ l- O+ t5 N6 Y# t
9 k" p/ [' e8 o/ |
   〈/tr〉8 k" g+ [. j5 w1 ]! [8 [9 O, w

7 m& l1 }& z- }2 K   〈/table〉" |- }8 k6 v6 H, n. a  K( @8 e- Y
7 P! G% W; H9 `1 Y
  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER- postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。' ]$ }4 t& W6 ~. J( ~  y

, b- y% N& B6 X1 L% r0 M2 t' m0 W3 ~  源代码如下:: N% ?9 }. u: w: I- v0 F3 Y
; E+ |7 v+ g4 l2 x
  〈table border="0" bgcolor=white〉0 {) p; i! K2 |# P, B' X
% X+ a6 Z0 j8 \, w% c
   〈tr〉
. J: M" A. s/ F6 }' X* }  y+ [" l- O  {, D' w- W' a3 W
   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉+ p0 m7 g# ?8 K( Y8 v
& L, P0 Z3 ~: ?0 v
   〈/td〉
/ X1 y$ o- P0 x" b
+ q7 d! l8 J: K6 R1 ~+ _   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
4 ?, E4 c$ s3 F/ e
  F0 _- ]* o1 G+ b; O/ `   〈/td〉
4 P" F9 M( p$ t$ z: m$ E3 V3 N- s
   〈/tr〉
2 W# p  x/ S% A; g3 ]  Y+ J$ F
1 T. |' _9 e5 Q   〈tr〉8 q0 X. Z4 _3 C; }5 J2 k

2 ~4 Q: ]1 Q% U' @9 `, }0 k8 {. v   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉4 ^0 i: m$ s' N6 X

4 L* U* R" W4 o6 I7 b9 p   〈/td〉& X/ ?7 i9 U2 S5 d- T2 x

+ \2 @  N! Q0 i+ f' Y   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
' C) [, D$ c3 B) S. g# h- @( b1 V% b# U- @5 l2 M7 v6 w( a: F

7 H# B! x% r/ w6 }$ K   〈/td〉; J4 F# @0 Z- k1 J
1 {* Z. A1 E4 O. I6 r1 _
   〈/tr〉
4 T6 R7 |' m" y/ b) d: w4 E* y  I. a4 ]+ Y$ T. Y
  〈/table〉

TOP


在 @89w.org 中获取一个免费帐户
挺好的。。。。。。。。。。

TOP

发新话题