获得本站免费赞助空间请点这里
返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
1 M- l2 X- u( q# u: B
: G, J" z0 T1 N/ l' H) W下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
: C9 L/ T5 O" m6 g7 r  W
% _( W, Z% v, Q& u<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">2 M7 y! y$ K. ?) ]8 M- O
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>$ ~% G" j$ R0 m4 T  r
  <p>sdfasdfsafsadfsad<br>
+ P  P/ }! `! a4 q  sdfdadasdfdsfasdfasdfasdf  </p>) Q# }! d: _& ~- W$ Y
</div>0 W5 |7 f8 O2 s  |+ j. @4 K

; l2 ^: z) g& a5 ?这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。6 a5 \9 ]- \9 W9 I
6 n* P1 a/ j- V2 `3 I
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
8 L* S/ ?% r( i+ E! I- [. G# x8 l. r4 Y- v; R( j
试验证明,z轴的数值越大,这一层就越靠前。' b* z: O) [* o+ o+ f+ ?9 V
2 u, C8 l# F4 [8 n. o! ?
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
* a  v, H: {; b& Z) G  Y( i# x  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
* V! |0 d0 @9 A# v  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
8 o4 x8 X" A2 H0 l; T! J( v* g% D( i</div>
' @5 f! u# ^% i  A# {- q# v: x. F& m/ |# x5 B, e6 {+ F# v+ x7 y
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">, }/ S% P* k1 O2 o& v  P% q
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
" H- W: I+ q2 _  <p>ddddddddddddddddddddddddddddddd</p>
' s) L" G/ X! a' P+ o0 a</div>. a/ `: l  e& b) d5 V$ K/ N( e* g
/ ^- i, D# P. H5 ^7 O% W
body 的z-index应该默认是0

返回列表
【捌玖网络】已经运行: