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

admin

dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。% y0 C2 y6 k* B' M/ j3 I
  E7 ~, S6 O) o* \' ^
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。( e) `7 p& K# |+ w" K

# f/ n+ n% J* T; _" ?+ t<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">1 h- ^+ Z$ l3 f- X& M
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>- J  {1 [/ c, F
  <p>sdfasdfsafsadfsad<br>: K# ^* ], f9 G2 C" B- I. D
  sdfdadasdfdsfasdfasdfasdf  </p>
9 B5 n, D, O$ O  _4 d, K& C</div>
& ?& h2 }0 N) n; {$ o) r# l: b/ r* S/ J: N$ w9 G" u  P" P9 I
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
2 k* ^6 K1 ^8 w6 ^5 N
; Y5 Z/ V" L8 J  d# h6 w$ x/ r( P层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
: J9 b  t' \5 B& O" \4 X6 D) ~% T- x* W  c
试验证明，z轴的数值越大，这一层就越靠前。
' o  u- M1 v2 o3 J6 P0 ^; a2 V( Z/ e$ M! k
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
# o; e' _4 t- p  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
# O" l' f( R  R5 L+ p. T9 R  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
: H' Y& c, }( ?" y* [2 \9 S</div>! b' y( q9 ~$ ?5 U2 G

3 U* z5 v+ Y, u  n$ Z; Q<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">5 H, ~% X+ S9 n- t7 l
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>* R( h8 G5 q  X& f7 `5 D/ _+ N3 K' n
  <p>ddddddddddddddddddddddddddddddd</p>
: c8 n" o* q! T3 O</div>% ?8 c. ^; k) v1 ?* q! v7 ~+ {1 L
- N* f& J. A- ?' l
body 的z-index应该默认是0