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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
6 n0 O! J. s& `- m; v
" O0 z2 h- _8 n下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
6 k% ?3 V: k0 e9 m% ^" l" L
4 a( T3 z# L2 E0 v% X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
1 s1 a8 g; G, C7 F- s  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
$ {) b, n- ]: ~  a  <p>sdfasdfsafsadfsad<br>" C9 [) z5 G. T* y
  sdfdadasdfdsfasdfasdfasdf  </p>
4 X2 e# K7 n! w: {</div>* B) c% Y5 `5 k  W  n9 G$ Y# N4 h0 G
: z- S" ]. S, P- c
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。( T6 h* K" W4 V) X( a

) ]) ]" U2 q; E3 d层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
& l) T2 K" f# N& P. _( K
+ U( x! c( Z: @4 s; M% l试验证明,z轴的数值越大,这一层就越靠前。
* H- ^7 V" e5 h7 D1 H) A. s% ]0 U. \0 B0 p( |& `; x- w
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">* d8 m" q9 ^% }7 Q+ g2 q
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>& W) l# _  A7 \9 B
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>% c; d4 e. v7 g+ n
</div>
6 w8 O5 x, i0 o2 r8 T7 O, }
/ ~' w' i. m( M# C<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
, Y: m+ ~8 }) G  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>' a$ O6 Q# c# l8 d( P5 ^
  <p>ddddddddddddddddddddddddddddddd</p>
' X/ O4 [9 J* F4 p1 i</div>1 q' Q2 x% k0 S4 u
0 W* T' q+ E" U0 k: ^' S" x3 \
body 的z-index应该默认是0

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