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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。9 N+ M* t0 u' f# J0 \# U, g

) |% G  J% k) U9 D下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
4 K  O) W- {2 u8 O4 S/ i5 R- ?
  D/ j) f& M/ p) ?1 x3 q<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">- _9 y- O; z. V+ T) z- ~
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>" n7 S$ A" Q. {8 |
  <p>sdfasdfsafsadfsad<br>& v2 P* J; s: a6 P& }- q
  sdfdadasdfdsfasdfasdfasdf  </p>
; @, d9 F: X; ~- U3 q. v</div>! N( u4 y  n* z! n$ k0 f

7 u8 u& @5 p' S0 i, Q这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
) Y/ S3 H1 O, ]. O$ I
, J# M* Q8 M6 ^2 ?- K& T7 G! W9 h层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
7 [# h- S2 U: v8 ~0 x9 s: L2 @2 p# o: u( U! x% ^" r6 s; s
试验证明,z轴的数值越大,这一层就越靠前。
/ _+ K0 Y. z: j& v2 o* H' j, I
& u+ I' Q: I4 I  V: k<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">1 j% J; Z, o) G$ _8 }
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
1 S3 }& v0 i$ a& h3 A) o( a  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>6 [3 Z! }. f& l+ o: C
</div>9 A( C4 Z/ X/ P! G

( n& J- C% _# Y. N<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">) b+ k1 f9 t/ \& ?0 E. f& ]( u' I. S
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>% C& u# F: m+ h  G
  <p>ddddddddddddddddddddddddddddddd</p>: n: `, x  k, W: g* o2 ^# u
</div>
" e5 E0 a& Y4 K0 u, N/ P6 Q8 J: X5 T  J  v; R
body 的z-index应该默认是0

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