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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。/ H+ F) b& F5 U* D; i
4 H8 d6 X; {: v" k0 j4 r
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。! I/ g& e& Q+ e' T3 k+ m7 ]
. E" g& p2 e. n
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">! ~! y7 j5 M2 O" w, t
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>  u; n. N2 a0 M7 d# e1 _, m
  <p>sdfasdfsafsadfsad<br>
9 e, i. X. Q2 z$ X0 R8 @6 \2 u  sdfdadasdfdsfasdfasdfasdf  </p>2 W+ j) w6 E9 a7 x: V3 V
</div>1 A8 X, K8 y0 `: T* d( R/ \" Z

1 `! q) \& P1 u) D" G# m  d这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
7 t7 r2 V3 @0 O
; o' m6 v9 T1 v$ `" d! {0 w层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。" e% z5 a: R2 r9 ]- e# I
. k7 F+ r* Z2 u; n0 k7 o2 z7 ~
试验证明，z轴的数值越大，这一层就越靠前。% J/ \; t' ?3 W' Y1 y$ M

% J  d" l8 f: m5 |0 D' F1 i<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">5 v4 \& B9 n) P/ p. x4 r
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
8 P" a1 O( X! m( a% k# p. O  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>; B  w; a  b( Y- R6 T
</div>- w8 @2 z( s1 ?8 l) A

& K0 |1 a  k6 @' P8 t$ a4 h<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
9 w' N; e( Z& v8 V2 B8 e  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
' M- y8 |5 u1 c/ t( D  <p>ddddddddddddddddddddddddddddddd</p>
" d4 X  o4 X8 V9 J9 V/ E- @</div>8 H, R0 [* P- Z1 j
# f2 ^- R% i7 a; W" T5 d7 f
body 的z-index应该默认是0