  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。7 m& e( j# e& G! Z) y6 ~+ I/ O
5 C, J- T5 _3 x' d* Z2 L
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
) {7 N& s. I2 w# C* M
- ~3 N" F$ P1 Z<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">, \) g+ X# I: ~, `9 O; U
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>! J- T$ u8 L3 ^" P# i9 c! c
<p>sdfasdfsafsadfsad<br>! A9 P+ O1 A# O' C+ R
sdfdadasdfdsfasdfasdfasdf </p>
1 g6 D) C( a' S5 `, r</div>& o! ?& e% F2 _7 G1 N1 P# V0 w4 m
6 R% t0 ^) c, @" \4 y" X
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。, S) b" c* c$ d6 ~5 q1 V/ S
Z8 X- S+ \7 m2 |0 f G* Y: d层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
! \0 j+ K7 S. z4 |3 n8 `
H w. e5 C! d' ?试验证明,z轴的数值越大,这一层就越靠前。6 g5 t7 B8 m# o/ E
4 a; K/ o0 U9 n<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">$ H' `7 I" _$ X# v
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>$ N# o, S& o, Z$ v+ K
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
, p" q- J, x) C) G |% J7 S</div>6 d/ P5 X1 c, O( ?- l( J! y# j
: L( P" V& C- G \0 }( A3 w! C+ h o
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
w, D; X. d: Z& c, E, }; I <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
2 ^% C. o6 r; U! a <p>ddddddddddddddddddddddddddddddd</p>5 Z8 N6 e& G8 U# t
</div>( J# j" E8 j7 ?8 e' }' t2 [% g6 q
( F: p& W9 t3 h1 {body 的z-index应该默认是0 |
|