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

admin

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

7 r5 j9 s9 ?2 b: t9 @9 h0 l下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。; U1 D- [( t1 t5 m! |: d/ M* z- k
1 I+ d. [1 V  Z! [
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">3 L9 _* s4 P0 R0 Q
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>. o: t) H4 U/ H0 Z; |  `
  <p>sdfasdfsafsadfsad<br>& I. o+ W( [( U5 Z. T+ n
  sdfdadasdfdsfasdfasdfasdf  </p>) t' G0 M) S2 q2 @+ O4 l
</div>( u! W, x+ i/ o0 i8 b5 P4 J
1 k/ X' ^$ x! s' Q0 ?9 ^
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
, O1 K  b& \: ?6 F- a
/ i9 d' V, E% z4 f$ ~* |层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。& b. w  a1 v' p0 n. c, X) e8 i

3 g& l  m& }" r. e7 m9 F( y* D6 @! j2 J试验证明，z轴的数值越大，这一层就越靠前。: T* P$ m- _4 \; f5 R
. d# k$ i6 v9 ~7 Q) u
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">2 {  c" ~) c; v, l
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
/ D8 k  q. x/ ^/ E1 l' L5 G% H7 ~  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>5 |/ b( B, l" h: D3 J# t  f* L( w$ [! |
</div>
3 Y% C& `$ o6 s4 K. `; g, S) [0 @! O! N: n9 x+ e
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
& ]) Q$ |+ P/ S6 N: ?" s  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>1 u. n/ Y" a8 ?; K* U+ X0 N9 {: \
  <p>ddddddddddddddddddddddddddddddd</p>4 g$ h1 I! Z) S$ G) t* [6 C, Y/ M" A
</div>
1 {) ~( _0 t2 d1 Z3 E( r
+ X' q* ]6 s, g4 a* k( sbody 的z-index应该默认是0