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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。/ R. O$ U. R. i) ?# G5 z/ z

% o3 S5 M  Z7 {) _6 p下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
5 b8 X! X$ _- _7 y. P1 x0 S
( [5 ^! v2 r, A4 v9 `<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
' m3 r: ^: H2 J# x/ t  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
8 d8 \1 f' W) F: }  <p>sdfasdfsafsadfsad<br>) Z7 M- Y. _2 n1 t; b0 E0 v; M3 L
  sdfdadasdfdsfasdfasdfasdf  </p>
1 t& N3 P+ r: k. y, I' A1 u</div>
# M/ f7 W! n& k& t* [$ r/ C! D6 x: R7 q9 Y0 w2 b+ m
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。0 x( q! l0 x7 a6 o- N" j0 H$ Q" D
1 ^$ m% y$ c5 E6 B0 g  z' Z
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
4 b; l7 l0 R- O9 Z; `! q
7 n8 q% E- c; R# g试验证明，z轴的数值越大，这一层就越靠前。
' E- W, }, [3 s5 ~- I) q
0 O  Q- P3 Q. O/ Q9 j<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
" V; e) `4 T6 k  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
3 _8 ]& z7 K3 h/ M/ Q9 t( t+ O2 a" A  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>! o# s  F& p" D
</div>- p- o3 Q8 A) E: K# s9 J
: r- r3 F9 h0 d( g( t! `) D
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
* C- `- c+ {$ O. y0 E  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>1 d$ w$ H! j8 ]$ N3 R/ X3 K
  <p>ddddddddddddddddddddddddddddddd</p>
! [; n; `% K- E* q: }2 g9 m9 k</div>- a2 G2 f; V! O: ?& I; n+ V+ s" u

6 D) Q7 `% K# Q- z7 s) Zbody 的z-index应该默认是0