获得本站免费赞助空间请点这里
返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。* K3 @' a* X  H2 M6 d7 `4 H
5 p5 m) o& ?& S% V8 D
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
$ V# U0 @" i; ~$ O# I; E4 V. L3 u% E' _3 s6 [1 u4 w& p& b2 `* B1 ]
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
/ Q2 g9 |  W8 ?, B8 |% E  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
: \9 `3 a, O; k* a  <p>sdfasdfsafsadfsad<br>
" q+ l+ g$ I$ D; M: ]  sdfdadasdfdsfasdfasdfasdf  </p>1 |* y! i$ W) W" w
</div>
" n0 Z8 U/ D1 B6 z8 l
  M8 t: _( U' o8 j( V这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。# N$ p+ l; E& V9 t1 J" w: o4 y; @

6 ]3 q5 `. H3 X, Q层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
) p: t2 L- f- e. T
: s' }, F+ g8 p) h% i, Y, u试验证明,z轴的数值越大,这一层就越靠前。0 X7 F4 h5 t1 ~- B1 }/ o
- A# v" r9 G% g3 r
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">7 ?: W( K& o6 E  U8 T$ I0 f
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
% m4 z- X7 w2 ?- \  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
7 e% ^8 m( L0 [) }</div>, J+ W# |9 X( a' d0 Z# x
( L( _8 f1 n( k
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">3 l1 O- ?( {# c. Z. q; g' \
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>0 ?1 s7 b8 z/ X! o, [  }3 Q
  <p>ddddddddddddddddddddddddddddddd</p>+ F; d: ]  E3 U9 F1 ]  k
</div>+ R6 P' V0 O2 {7 g, }3 l
- y( P$ x% q6 |. q. L% y* g
body 的z-index应该默认是0

返回列表
【捌玖网络】已经运行: