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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
6 J* n! f' w/ P: L! ?
( S" {$ e/ Q2 Z) k& {下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。4 f1 ?) t' b/ B3 v3 {) V

4 v' H; s# a  c5 D0 p2 E<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
4 b$ D% t1 F$ c* H5 u1 k( M% I+ N  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>) ]$ d0 D! l' R& h8 C
  <p>sdfasdfsafsadfsad<br>
4 `7 s* Y# L/ |5 z1 K: d  sdfdadasdfdsfasdfasdfasdf  </p>
; h! D% P9 n' N4 R6 E</div>$ r/ U9 Q* R2 C+ n: B. q

3 y# x" @- h6 K4 t! B. R. Z这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
8 v1 S) J0 j) ]% k% G
: d+ e0 v* w7 ]层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
3 R9 Z2 K9 Z& w' I' V% _0 P/ e! t( P. j1 s2 `
试验证明,z轴的数值越大,这一层就越靠前。
8 C; @" Q+ n- `
" a6 b' k9 L# M2 O( H# |& K% L<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
; d+ w6 i1 Z$ T2 @4 o" a/ i  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>; w( d- [6 [( [4 T" g4 @$ |9 b
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>, ]# x3 c) N! N# n- P' W
</div>
) X: |2 H1 i8 Q0 F& F! y0 y
/ ?0 K$ r- X8 l" a/ T' G" x6 d4 D- N<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">/ D* Y2 M) w, d! U) ~, L2 q
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>) v% q6 G% ^2 N, a6 X2 B
  <p>ddddddddddddddddddddddddddddddd</p>
' Q9 L. E: m4 a! @8 e: a3 F/ [/ H  w</div>
4 ]4 T3 w, |" E2 k5 F9 |/ G3 F. Y5 n% j- Z, o3 {1 ]
body 的z-index应该默认是0

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