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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。! @  @* e2 F  c" i$ x3 C; q- D( f) p

: T: \, I5 m9 \6 y& L下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
- m9 @1 h% F: h" K- C* l! q' v! w3 C6 ^/ X# f
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">' G- V- A* B$ Z5 T" R
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>+ T- r. V+ x# t. w  r
  <p>sdfasdfsafsadfsad<br>
" d0 _8 I5 Y8 w1 a* b  sdfdadasdfdsfasdfasdfasdf  </p>
  }* M* m( Z) |" \% k</div>5 x( d$ j" x- v/ B, b. Z
9 ^, L  v0 o. p0 z9 H# h
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
" b. R+ n8 B6 |6 K. [/ k
( C% u9 o0 |" Y5 y( p+ A8 |% v8 b层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
5 r; }) T' d2 M2 c3 V% \! [, n& ?3 p9 _+ J, l" A) S- C0 d0 Q' D6 P
试验证明，z轴的数值越大，这一层就越靠前。
8 H+ ?% x9 M) I5 G3 H) o( M# h/ @5 C8 j" g; b3 C
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">8 u  g* _1 h3 t9 W0 O# }
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>* P4 E1 o; w( S/ i5 X
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
+ C# [7 i( e9 Z0 T# J" h</div>
- b- q% U( V, ?2 _
) d  F$ E" K# \) g# @<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
; L9 m: @) Y% N- Q  F5 X  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>6 V$ b# [6 r  S# l) V8 T- O
  <p>ddddddddddddddddddddddddddddddd</p>
6 n, h+ T! f# N+ E6 R0 |7 M- y/ l- F</div>
$ E  G/ U! M8 o0 s, o) z8 ?8 U* ~
body 的z-index应该默认是0