标题:
dreamweaver mx 中层(layer) 的概念
[打印本页]
作者:
admin
时间:
2007-12-24 17:35
标题:
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
: t7 ]# w. B" W, k. v1 y1 B0 ]
" d0 K. i- [1 K `2 R1 e
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
) y+ S. v; @. J7 ~9 H/ v9 S
6 i" b4 h/ |! e
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
3 j" [* y2 f" k X$ n2 g
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
1 o( Y# ], Q! ?; {
<p>sdfasdfsafsadfsad<br>
! G- w) n1 l+ f0 X) q; |6 O
sdfdadasdfdsfasdfasdfasdf </p>
7 J5 h. _. p. N, x; s9 w: n$ y
</div>
1 P" B9 g& s$ C/ f$ r
0 T. ^/ {5 b3 {, I* K# y; l
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
# E, V- \ m( G0 c* }
9 O& S- }9 T7 y0 q; t# {
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
0 j/ l+ L) F r( I' H' z* L. Q' Q$ y3 m, h
5 D s- |' P; |' y" B2 |1 ?
试验证明，z轴的数值越大，这一层就越靠前。
0 p! c0 }8 j+ s+ I
; [& Y& n1 h( G5 D! F
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
; ], s" S2 v! v$ n
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
' F2 h1 }( }! V9 s' i7 }
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
: ~0 g' K+ t4 Y4 z7 i- q4 \1 ~7 E* D
</div>
, n6 a# m0 R+ u+ v3 J$ Q x+ b% ^
: r: m" P# U1 O
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
( P6 ?3 c% O9 l) s1 \
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
b' v7 v+ c0 H3 k2 Q' K. \
<p>ddddddddddddddddddddddddddddddd</p>
: F* D) v l& f6 Z! ^$ J
</div>
1 ]/ \! V7 z7 s9 b6 J1 J
4 m- _7 Y: q& N+ ]+ m7 a
body 的z-index应该默认是0
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
