dreamweaver mx 中层(layer) 的概念 dw层, layer

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。% O5 i$ a2 W8 M  w  c" `% m6 q
5 m/ p- a$ J% K0 \+ d( y
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
" g4 u: e; v' b  n' s
9 l$ [: q+ E5 s7 y<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
2 H- e* Q3 p( A: u- r. ^; ~  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
7 }  k; ?7 X" {  ~6 G! w: u0 ]  <p>sdfasdfsafsadfsad<br>
5 }) p* V' K9 [- V7 \. m4 p. E  sdfdadasdfdsfasdfasdfasdf  </p>
/ n8 h& _6 w; K3 r( s. N</div>
+ l( V/ g3 M! ~( g6 T( j" o
- {: d/ L+ w7 N7 w; O这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
4 l; e# w+ v- U( k1 A8 Z' F8 q3 a# o5 f7 t% G
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
  q9 X, ], g; W9 g- o8 ^* e. @
/ W0 ]# ]' |5 ^0 W试验证明，z轴的数值越大，这一层就越靠前。
3 ?: U0 u  p0 j8 E+ h( h; f5 W" S+ \$ p* |3 Z* c* @
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">8 x. E; n6 ]# w0 R! R2 m; T: I
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
/ |! K3 K7 T4 T9 ?1 l  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>/ `. C2 `9 D, A, ]! N
</div>
; e7 i2 F5 |+ S2 B/ [- [5 N3 u! h7 h$ b0 X4 {% `/ i
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">  w2 n: D8 o9 V
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
6 q% n  L: x" I4 Z, s, `  <p>ddddddddddddddddddddddddddddddd</p>" p# ~, S- h; m, ~" ]1 |' h
</div>
& e- A9 h+ z2 D" _0 |
0 P! U5 P: p' N5 _body 的z-index应该默认是0