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

admin

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

) @  C1 |. g+ e' k" R( r- e7 M下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
0 F1 a  g& V4 h/ B7 |5 d
) z/ Z2 o) N1 Y4 D% o+ z& K<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">6 [  `# H2 ]- b$ |4 z5 K5 Q
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>9 ?/ ~9 t9 \& t" V' s5 V$ B$ u% }
  <p>sdfasdfsafsadfsad<br>0 X' M0 W; u# M/ q6 @
  sdfdadasdfdsfasdfasdfasdf  </p>
% L. ~9 }( I- @! ?# j. q</div>( T. i; B+ @2 N& y0 _) P- T
- _& t2 r& Y5 @2 v0 P; t( }( M& M& Z
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
7 B: N) d- d. y5 s" S* b7 n
- q, j) q0 }/ e- k$ F0 o层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
3 Q9 p& [/ m3 a, R0 \( j
' n# g9 [+ x# k试验证明，z轴的数值越大，这一层就越靠前。+ h5 v$ U- t+ l& C# ^* Q; T

. i. N! _; W  {4 d( P. X$ `: I<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
, c' [8 `7 ^, r4 ~  y) f( B  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
5 P8 ^0 A3 r# ?# `6 |  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>7 T: W( d0 p0 d) ~( V
</div>4 _8 B$ n( b+ t1 w
+ d4 \8 m& \# i' M% o2 ~+ Z
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">6 p& k9 [( F. X# z0 m5 l
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
2 P6 N3 {8 C1 B, z6 c3 a  <p>ddddddddddddddddddddddddddddddd</p>
, c6 {& l2 e& i5 y1 A6 {* O</div>
" v5 }5 u" Q- J7 Z
& n. A2 U& K. e( @5 o7 Bbody 的z-index应该默认是0