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

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

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