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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
& S4 e. L) Y2 A" A; \* w+ x
: r6 {/ \$ P0 X下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。0 v3 O; ~' w( b) k5 V- L

  O3 o6 @2 q) U- N" M) B% n. O. x<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">% G/ ]8 p) {- e/ s* P! T$ _, i: z
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>9 `+ d1 N" k5 n/ S7 b& r
  <p>sdfasdfsafsadfsad<br>
3 c) t, S7 c+ F+ j$ F" B9 i  sdfdadasdfdsfasdfasdfasdf  </p>/ x5 i# `4 \9 Y7 `
</div>
, }- {6 {' E$ e: r" i2 t$ x
% x( _& k. S2 l% e  i这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。7 x: o3 F2 X7 J# `

+ \0 N9 @# t' Q- O9 U7 _层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
# {& v+ R+ W- v
- v2 Z4 M! g0 k- D* S1 W- a试验证明，z轴的数值越大，这一层就越靠前。. S, h8 i2 @. b7 W: g" [; }; s

! J: _! V& _/ y3 D<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
& L' p/ ]% u4 ?. A: T' E2 U  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
1 O* ^7 {, P4 t: G$ t5 a* Q  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>- B7 ?: S' E( d* P$ r, U# h% E
</div>
. P- G* l' U% @) h. q# ?6 o; K& C1 b/ `( j- ?0 e( d8 L: M, c% H
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">9 W! o. t9 S3 ?7 A8 a) t+ U2 Z
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
6 F) Z3 Q  w6 j7 }6 H: G' j6 V8 N  <p>ddddddddddddddddddddddddddddddd</p>
, `" c, y1 d% N& s+ N' B</div>9 w" ]/ u0 Z, x

9 o- z* j$ z( J6 w8 pbody 的z-index应该默认是0