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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
! R) p: c% V; M# A! L+ f; `0 O
; E* U. l1 z: C& t0 i; \" }0 O下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。+ q0 z' J0 s6 Y
4 [+ t9 B1 N% [1 X" C  ], |
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
$ [0 [( L8 r; {  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
! X5 I7 q" N, }6 s2 z) w  <p>sdfasdfsafsadfsad<br>
" ?4 d' c1 Z4 Q: ^) q- m  sdfdadasdfdsfasdfasdfasdf  </p>6 s' y% L% t& A3 \- V
</div>
+ u3 o( ]5 _4 i
2 ]( u* b. P9 e- z+ m2 [' E这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
6 P( s2 k6 F- U2 l/ @
# @/ w2 a+ i9 O9 a6 @$ t. Z% l层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。7 g8 \- b4 j$ k

/ p: t; K, X* y& y- @! H5 Y试验证明,z轴的数值越大,这一层就越靠前。
4 A5 R5 a+ w2 m+ U% t! O  k/ v9 c* P) F
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">' B$ K1 K9 K! o9 B' M
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>, Y: Q( s8 I+ A# i7 z1 h
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
4 Z2 p, s4 Y7 a) U9 R7 s</div>
4 S2 D! S9 x2 W6 e
  O, j2 [0 u' M<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">2 x& B1 m+ _6 h. r
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>! a3 E4 M# p4 P' Y+ k( `1 h
  <p>ddddddddddddddddddddddddddddddd</p>- L* G6 E: F6 I7 L) K2 S1 z
</div>: n' \3 V( h; @& x
% G/ e$ B/ P" d/ q
body 的z-index应该默认是0

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