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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。- V& f5 {4 i" h! W
! @2 h& K5 n1 y: |( |0 v7 n
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
1 T) V9 C" J9 `. L3 @7 ~6 Q6 E' k% D5 [( q  r5 T9 U+ }5 C. X: W
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">! M, r+ A/ j8 S7 u9 ~" i- p
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>( I, W) k  Y8 i
  <p>sdfasdfsafsadfsad<br>% t( L6 z" A6 ^9 d( N! ]
  sdfdadasdfdsfasdfasdfasdf  </p>
' u* i+ e- b+ D4 Y3 n+ _6 ^</div>2 G0 z) ?+ t. S: v3 H
; Z; X' Z  u% [: L4 e% m, ?
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
3 j. u9 a) h1 o. j7 b
# [! m) M% ?; s, e' M) A, E/ _- f4 J3 `层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
' f+ r9 l/ _! n9 T
! R& P" E5 F" _  y+ B/ _3 m试验证明，z轴的数值越大，这一层就越靠前。' E( k; h, x2 r% ^4 ^
4 W% M; \5 W4 n  U& A) q, A" I
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
) F) Y' [  ]: J. h' b3 ^. Z, A  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>: O$ g* _/ D. V+ o( Z8 o) O
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>$ d! ?! G( W- P" ?% F+ N$ }, f, n
</div>
" k2 ?6 l9 x* H* j7 a1 w6 v& O& ?! f
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
3 o: c" Z( V+ l2 U2 r  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
3 L8 B9 |' _/ n( `# ~: ]+ D  <p>ddddddddddddddddddddddddddddddd</p>1 d1 H$ \, E7 `, I9 x" a# S
</div>9 d- `: _9 r& J! x! F
; t( \+ z  R) Z; g( j
body 的z-index应该默认是0