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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
2 c# `9 O- q4 d$ U5 `3 t; H0 n4 ~% s
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。& ?* f/ O' R% |! C; x9 O

$ b5 V6 z  \. T$ ~6 X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
/ K  Y. M% U% m* L, K8 h9 V  }3 S  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>1 H; t) u' c7 c5 s* {
  <p>sdfasdfsafsadfsad<br>
( V3 V7 A# z# X1 M  sdfdadasdfdsfasdfasdfasdf  </p>
5 O! w3 p; v( ]4 q7 n</div>
2 M* _* M9 m( |* G# V7 t
4 ]2 q* }5 M4 O这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
# R/ K: m5 |' t5 ?
7 r) I9 Z6 o- _/ B$ b) X$ X7 T( _层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
! N/ n0 `" f# D  [
6 c& P8 w4 Y) _& O5 `6 O/ m试验证明,z轴的数值越大,这一层就越靠前。
8 ^" w5 W& U" ?/ @( K+ v
% L4 h/ B! ]6 {: ]<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">+ d% ^9 n# {7 N4 X
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>- I& h& L6 e, Y7 s! e
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
1 h0 @& s; R  H: l6 H" G7 g</div>
4 D, n- U$ i' x, M
! H+ y: Y' v3 G0 Y. ~% E<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
+ G# U9 t0 S7 T  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>* d: ]+ U  r# w. ?. C! U: S
  <p>ddddddddddddddddddddddddddddddd</p>0 }) T7 @' {, w' {# @! ?
</div>2 T% ?  {( A& W. r$ w" w

+ K0 ?* G0 M& n4 Y& Pbody 的z-index应该默认是0

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