|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。) m) _- `3 X4 N! |' M; q' R
! F8 m+ o8 @9 v3 N# N3 G2 ]下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
7 }1 h3 S' W/ C$ O/ v A" |( n8 |5 t+ J) h1 J# t" j1 E7 C
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
; v+ ~: l$ b# j9 Y <p><a href=../../blog.csdn.net/overmind>overmind</a></p>/ q4 _, A+ n! Z6 Q% Q
<p>sdfasdfsafsadfsad<br>
! E! G0 |" N) ^ sdfdadasdfdsfasdfasdfasdf </p>+ C9 P6 W' T* v1 [0 z
</div>
) h7 f2 K9 w q% y8 W+ y/ P
% ~& w2 g9 J& y6 T: N7 m这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
# f0 r" p6 O* s. t& f1 ^+ K5 J% m' _3 E, w: n7 o* Y: o
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。% k7 R2 I0 F7 B2 @. t
9 X5 s( `) g' N" ~& w试验证明，z轴的数值越大，这一层就越靠前。
* M7 z: [0 N& W+ F$ f
4 y& K7 ?8 \. Z/ c$ O6 o' V! X- N<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">2 d5 D: m1 }: [4 v
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
- r' s; X3 n5 u5 s <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>. W) }) J _) B. j2 @
</div>9 `4 p" P% R7 c8 {# e' V9 m; W" |
" T# R& ]. q) p5 A! r0 g<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">* I& o- u6 v, w3 C: [. }
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>, ]5 K$ {; u" P) v
<p>ddddddddddddddddddddddddddddddd</p>0 e! `. G8 h: F
</div>
2 m+ b/ t5 B! ^4 V
. G6 ~ J: I- u% }7 }7 v% V" I* wbody 的z-index应该默认是0 |
|
发表于 2007-12-24 17:35
| 