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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。7 m& e( j# e& G! Z) y6 ~+ I/ O
5 C, J- T5 _3 x' d* Z2 L
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
) {7 N& s. I2 w# C* M
- ~3 N" F$ P1 Z<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">, \) g+ X# I: ~, `9 O; U
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>! J- T$ u8 L3 ^" P# i9 c! c
  <p>sdfasdfsafsadfsad<br>! A9 P+ O1 A# O' C+ R
  sdfdadasdfdsfasdfasdfasdf  </p>
1 g6 D) C( a' S5 `, r</div>& o! ?& e% F2 _7 G1 N1 P# V0 w4 m
6 R% t0 ^) c, @" \4 y" X
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。, S) b" c* c$ d6 ~5 q1 V/ S

  Z8 X- S+ \7 m2 |0 f  G* Y: d层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
! \0 j+ K7 S. z4 |3 n8 `
  H  w. e5 C! d' ?试验证明,z轴的数值越大,这一层就越靠前。6 g5 t7 B8 m# o/ E

4 a; K/ o0 U9 n<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">$ H' `7 I" _$ X# v
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>$ N# o, S& o, Z$ v+ K
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
, p" q- J, x) C) G  |% J7 S</div>6 d/ P5 X1 c, O( ?- l( J! y# j
: L( P" V& C- G  \0 }( A3 w! C+ h  o
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
  w, D; X. d: Z& c, E, }; I  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
2 ^% C. o6 r; U! a  <p>ddddddddddddddddddddddddddddddd</p>5 Z8 N6 e& G8 U# t
</div>( J# j" E8 j7 ?8 e' }' t2 [% g6 q

( F: p& W9 t3 h1 {body 的z-index应该默认是0

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