标题:
dreamweaver mx 中层(layer) 的概念
[打印本页]
作者:
admin
时间:
2007-12-24 17:35
标题:
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
$ C" m9 h6 V) {3 x
: g" k3 r4 l+ z O$ Q5 v; s, l
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
, \$ o$ \) u& g; W
6 B' x( V6 u/ B- o4 M E/ c+ ]
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
; a( ]- L9 `/ H' p- u( i: |
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
6 w3 a Z7 p/ O+ Y% o& Y4 m
<p>sdfasdfsafsadfsad<br>
1 Z6 d. j Z: l: \7 h* ~' _, G
sdfdadasdfdsfasdfasdfasdf </p>
, R) Q) o8 _; P0 x5 O0 V6 m
</div>
U8 M3 i5 z: o+ r
& y9 G Q; G$ ]1 E2 M
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
: u0 _, c! G1 a- f
" p4 o7 a0 U8 H. G% D% K! x! x) v
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
7 q& R1 O; t4 i" S
& ~4 `1 ^9 |; O/ F0 c% |. S8 E
试验证明，z轴的数值越大，这一层就越靠前。
4 s( L2 o1 H. _; a' _- w
' N2 T7 a3 `- O7 r2 A! Y' X
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
0 n( i" y! Q q$ F9 M
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
. g2 N* F- b: W6 {/ v% q1 I) d
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
' c/ X" }' `% L& F
</div>
! h7 |+ F d/ C0 y- `
: l- S9 A' v* L
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
; |8 Q3 Z/ @3 x) H
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
) J/ P C; j( i1 }! k0 e' L
<p>ddddddddddddddddddddddddddddddd</p>
/ H2 S; S2 W' Z& {5 _* c8 d
</div>
& q: A4 U& v1 Q2 v4 F
) w, [% o% Y+ U
body 的z-index应该默认是0
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
