  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14223
- 金币
- 2402
- 威望
- 1647
- 贡献
- 1350
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
2 c# `9 O- q4 d$ U5 `3 t; H0 n4 ~% s
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。& ?* f/ O' R% |! C; x9 O
$ b5 V6 z \. T$ ~6 X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
/ K Y. M% U% m* L, K8 h9 V }3 S <p><a href=../../blog.csdn.net/overmind>overmind</a></p>1 H; t) u' c7 c5 s* {
<p>sdfasdfsafsadfsad<br>
( V3 V7 A# z# X1 M sdfdadasdfdsfasdfasdfasdf </p>
5 O! w3 p; v( ]4 q7 n</div>
2 M* _* M9 m( |* G# V7 t
4 ]2 q* }5 M4 O这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
# R/ K: m5 |' t5 ?
7 r) I9 Z6 o- _/ B$ b) X$ X7 T( _层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
! N/ n0 `" f# D [
6 c& P8 w4 Y) _& O5 `6 O/ m试验证明,z轴的数值越大,这一层就越靠前。
8 ^" w5 W& U" ?/ @( K+ v
% L4 h/ B! ]6 {: ]<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">+ d% ^9 n# {7 N4 X
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>- I& h& L6 e, Y7 s! e
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
1 h0 @& s; R H: l6 H" G7 g</div>
4 D, n- U$ i' x, M
! H+ y: Y' v3 G0 Y. ~% E<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
+ G# U9 t0 S7 T <p>ccccccccccccccccccccccccccccccccccccccccccc</p>* d: ]+ U r# w. ?. C! U: S
<p>ddddddddddddddddddddddddddddddd</p>0 }) T7 @' {, w' {# @! ?
</div>2 T% ? {( A& W. r$ w" w
+ K0 ?* G0 M& n4 Y& Pbody 的z-index应该默认是0 |
|