|
  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
' g X* Z9 |) L/ @1 o! t+ Q4 R
9 E5 }0 R. J, y2 z/ l+ f' u9 W, h下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。4 N0 ~+ F+ D- s+ a3 i) T# q
& u- ~: A* {! S; l5 c9 j7 w1 [
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">+ k6 D7 P& q I1 L) F. _1 R* l
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
5 O% H4 K2 s, A- M <p>sdfasdfsafsadfsad<br>
5 ?4 i. Z7 h6 E; w sdfdadasdfdsfasdfasdfasdf </p>5 N: t3 {( D) J; J* Y0 v1 j7 N. j& q
</div>
1 X- E, Q( G6 F' A" o9 X8 a1 p% g' g3 I& I2 \
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
3 ]5 a4 A1 y2 q. P
' @( J9 K c. V9 T8 V层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。+ K4 x" x! ?+ X0 T* k2 Y/ l
& n0 v4 ]9 _+ W; A
试验证明,z轴的数值越大,这一层就越靠前。0 u1 u" q, C3 A+ t; M
% G$ F) h5 l) [) X, j8 U
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
9 M2 a: o' W9 }/ o/ k <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
0 Y, i5 h; n+ R) B [/ Z7 v9 o <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
8 w* ]4 B% I3 L3 h: |. N</div>
5 [' s% }7 q) y# B; ?# Y1 @5 W/ ^
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
/ z. r. f% Z9 ?6 k) z2 j <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
2 F( z3 ^2 N" K1 R7 ~$ o9 j <p>ddddddddddddddddddddddddddddddd</p>1 M6 v& Q& n4 e
</div>
* W. ]6 K. s1 u. |. R' G8 f5 ~5 l, N9 ]6 `3 i, f0 m/ S
body 的z-index应该默认是0 |
|