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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。  V7 z2 x% j) A- b8 F' g: v7 g
# N- F, _- k2 S7 ?$ F4 G/ H$ x
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。  i' g; v/ D' x4 T6 g. P! @- s" t
' O3 ^4 d$ j2 N
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">* l1 u6 b6 w5 p' u$ b
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>, u3 ^! \! v8 g. q, _7 O
  <p>sdfasdfsafsadfsad<br>% G5 K' G; r1 B8 l, Y$ m. l
  sdfdadasdfdsfasdfasdfasdf  </p>
  `( \* R8 y) Z</div>2 z; N5 F3 ]% l' W  r# S) M& W

2 X! M  v1 K$ ~$ O& @# ^这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。. L$ k9 Z: u5 A+ u' [: _
& Z& `2 d5 n( b
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。8 A! v; B" R9 s9 Q. a" u7 N

5 |; T- ~% v; j9 G试验证明，z轴的数值越大，这一层就越靠前。) u$ ~) T7 l4 p9 [. c7 x8 o& G' P
, b: `7 g1 q- b4 N+ y1 {
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
# O- K3 c4 J( G+ K" B  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
0 _, e$ }; W2 E# s9 r& L& I  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
! S7 Q" s0 R7 d5 B: Z+ b* ]' C</div>
7 r) N& O, _8 R% ~6 K% y1 ?- D2 W8 F' `  f* T% T  n7 `. w
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">/ b$ j% K2 x  D7 K
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>% @) \1 @0 u3 i. v$ Y: O3 c% f7 O
  <p>ddddddddddddddddddddddddddddddd</p>8 S, s( C7 }2 ^$ g' F1 X
</div>
, x, ]" X& I+ [! X) z
0 A" w3 U: @( `( f7 P; o5 L; J2 ~body 的z-index应该默认是0