  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
6 n0 O! J. s& `- m; v
" O0 z2 h- _8 n下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
6 k% ?3 V: k0 e9 m% ^" l" L
4 a( T3 z# L2 E0 v% X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
1 s1 a8 g; G, C7 F- s <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
$ {) b, n- ]: ~ a <p>sdfasdfsafsadfsad<br>" C9 [) z5 G. T* y
sdfdadasdfdsfasdfasdfasdf </p>
4 X2 e# K7 n! w: {</div>* B) c% Y5 `5 k W n9 G$ Y# N4 h0 G
: z- S" ]. S, P- c
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。( T6 h* K" W4 V) X( a
) ]) ]" U2 q; E3 d层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
& l) T2 K" f# N& P. _( K
+ U( x! c( Z: @4 s; M% l试验证明,z轴的数值越大,这一层就越靠前。
* H- ^7 V" e5 h7 D1 H) A. s% ]0 U. \0 B0 p( |& `; x- w
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">* d8 m" q9 ^% }7 Q+ g2 q
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>& W) l# _ A7 \9 B
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>% c; d4 e. v7 g+ n
</div>
6 w8 O5 x, i0 o2 r8 T7 O, }
/ ~' w' i. m( M# C<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
, Y: m+ ~8 }) G <p>ccccccccccccccccccccccccccccccccccccccccccc</p>' a$ O6 Q# c# l8 d( P5 ^
<p>ddddddddddddddddddddddddddddddd</p>
' X/ O4 [9 J* F4 p1 i</div>1 q' Q2 x% k0 S4 u
0 W* T' q+ E" U0 k: ^' S" x3 \
body 的z-index应该默认是0 |
|