  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
0 V) l$ h- q7 X1 M1 R
3 ^$ d6 Z& L+ V下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。% U; L- d7 h! c& [! O! X
* A" o0 E9 p8 R9 Y9 B3 ~
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
+ K5 Q& G: m- f8 ]$ v; t <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
; y1 G: j1 b4 P6 j7 R0 N- y/ | <p>sdfasdfsafsadfsad<br># v- U/ x( X. \2 `9 W) V9 r( o8 ^4 W
sdfdadasdfdsfasdfasdfasdf </p>1 U" m0 p r3 i7 E% v$ w
</div>* N- Y; w7 H7 s3 D6 F
+ Z+ M' `$ Q$ L& h% P2 ?" K! k
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。9 U5 u( K2 T7 n6 {
1 t* _" e& b" n; ^% E1 q, F
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
% ?# y; v5 W$ L' _. a: i$ r3 Q, f/ [9 v
试验证明,z轴的数值越大,这一层就越靠前。" R' h1 g$ Z& L' I
8 ]( ]3 S7 q9 _ M% I; o<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">- R1 [" o* q5 s! _. E7 |; e
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>+ K- l- i, F* m6 v) x' z
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
( C7 l; F) P: ^/ z</div>
* W8 C7 w! K1 \/ c) X0 ?/ H" }8 E2 d: L( R! o
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">7 e! x3 }8 b5 I, F: y5 i
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
' J4 _* H9 k4 t% g+ n0 _0 d <p>ddddddddddddddddddddddddddddddd</p>
2 m, c* t# k% A) m& j</div>5 {4 }7 q* q5 }. r# \* J- T, x
( ~: u2 [4 R% r) B7 ebody 的z-index应该默认是0 |
|