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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。6 M/ p% e2 k1 E* N* j

! O8 K- L( i6 w下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
3 |: s5 D8 E4 H& v; W- s! ?" O4 J9 m7 H% O4 L+ e/ k7 i
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
* C% r% h% e- \9 _5 I0 a  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>$ N5 U6 j6 r; B4 v! a5 e/ Q
  <p>sdfasdfsafsadfsad<br>" r: Z* ~; Q: X" h& B$ P
  sdfdadasdfdsfasdfasdfasdf  </p>( ?  R" B7 s/ e; `" t- Z3 C0 _
</div>0 ~0 e) T; R% u  _
/ q6 Y8 F- I' D$ {5 O8 L9 a
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。6 t( l- F1 J$ Z6 K, K

. z5 Z$ @1 Y8 ], c# F层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。# S2 [' _1 B7 D! @3 Q7 Z3 z

8 K3 y$ l  Y6 c# X试验证明，z轴的数值越大，这一层就越靠前。& u/ u+ o. n) B0 [

4 Z& r! O' r: B/ w- ~7 P: T& S. D- F$ P% Q<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
! `0 G; ~0 c0 l* \. @  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
1 P- s5 Z+ G8 o6 Z7 j5 {0 e  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
9 |: U! W2 O! [& z</div>
* S  T) |( }! m4 ~* D- w2 R# F! _0 q- i4 X( b3 Y0 {4 x+ c+ q8 U6 g
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">7 @+ _. j; O6 h* E& l4 d
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
2 p4 S: D! o! ~. O1 K  <p>ddddddddddddddddddddddddddddddd</p>: {5 \2 D9 B5 I0 P; J' J
</div>! C0 @+ B1 j% g$ ^8 q

! {( z" w. \9 Y# Xbody 的z-index应该默认是0