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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
4 f' s- _1 h# u# N1 L, Q" F: y- s  j6 f- X. e! e
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。8 f, }" m  g  D7 s8 W0 c% R/ {
  p  |7 B7 Z; d. d) t& w
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">% R5 Q$ S8 }; o: r  f5 w5 N& j. M
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>, i5 \7 G0 w2 q- e: \2 _; {5 o1 k% F
  <p>sdfasdfsafsadfsad<br>
% h) P) ~' Z, M( ~: q0 u1 x3 p  Y  sdfdadasdfdsfasdfasdfasdf  </p>& a- F" J# T2 b/ t* \6 |
</div>4 t5 p9 f7 |, K; u4 W
! w% \2 h8 j' t
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
' T& x9 \% n- U; {/ `, p  E# ~0 W
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。# W" ^1 e% r2 h. N# @! v
, q/ \, i+ x, U6 i! X) _8 O
试验证明，z轴的数值越大，这一层就越靠前。
, o- ?, @: n  A3 |$ x  L5 @# b! a4 d2 A0 ~# ?
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
; E8 S! c3 w. U% U: U  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>; `/ y8 ^* y3 [0 Y( n1 E7 t2 _
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
" c+ q: ^! Y, j9 ^  u+ ^) z* Z</div>& p6 @, a/ H$ _3 T' s  |; b
; `. g: y- x* s& x7 e
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
5 F8 a/ A$ Q4 F  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>" n  A" G8 r/ F+ ^, z0 Q
  <p>ddddddddddddddddddddddddddddddd</p>( j# t; q9 C$ P3 ?  D
</div>
- u9 O5 U/ }6 {0 z( Y
# E8 K4 Q1 O5 ^' [# T0 ibody 的z-index应该默认是0