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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。, U& ^0 k  f0 ?" P
$ H1 f8 ]+ ]* W( ^
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
/ R: T$ z( R. ^; n& _/ e* x2 S! J7 l4 S7 q8 _( E4 R7 H. |1 t
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
$ ]* W! i, _+ u* N1 n8 a  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
  C2 ]6 q6 M/ z% l  <p>sdfasdfsafsadfsad<br>
9 y2 k- q0 |8 s; i; X. \  sdfdadasdfdsfasdfasdfasdf  </p>
$ B  C6 w4 E$ B: Y0 V3 _5 e  Y</div>9 I6 z  C6 P4 l# Y

! @; o0 r! R1 [! H/ Q) N8 j这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。4 A7 r3 P; Q; b

% r+ ]9 s6 Y0 h% T0 }% E! T层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
, x3 w5 v* L, P8 {& X5 p0 }7 r) ^+ x3 e5 z* p3 T
试验证明,z轴的数值越大,这一层就越靠前。: M/ |+ V  h: a% s) g

( V0 b: Q: _2 P  X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">' K% R$ _5 t+ [6 V5 E
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
$ Z0 x; _' \& [6 F0 ]2 w2 h, t  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>! P4 u0 v' m( h; Z6 i5 _
</div>
4 c: M% u! V1 G4 h5 Z6 c) `7 F
5 m! S+ H/ b- T* F<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
  S% i$ h5 ]( s, u. U  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>' i# ]( K- P' d: q' ^" L
  <p>ddddddddddddddddddddddddddddddd</p>
* ?) g7 a' C( M- P% ?</div>0 s0 O, E3 H6 Y+ J* n) w
; d0 L* X0 i/ l
body 的z-index应该默认是0

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