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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。+ ]" l+ Z' L1 `( f( z

4 A0 U4 C) y! k下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
1 i& \! O) @/ L3 H; n  A/ t( \5 M
& E0 P1 D2 M/ l- I  @<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">8 A% {1 A" R- y! j
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>) r( \* S! g; Y8 ^8 p4 x; V) D
  <p>sdfasdfsafsadfsad<br>. T3 k! W. ^3 d# D9 M. T6 X9 B
  sdfdadasdfdsfasdfasdfasdf  </p>* G& d# V1 A# k# X! b
</div>
: J* C5 i, V4 u" l4 k- A- \% R
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
! u$ C- O$ A4 j! E, a9 X1 L
' h5 d4 O/ w( ]  e: y$ s" |! T" L层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。$ Q9 k/ M# {! d& ]) i! u8 I" J, [" [
: s, }0 Y; U# F- p% |
试验证明,z轴的数值越大,这一层就越靠前。
. d: q  G( D6 M( y$ S# T: T! q- V8 ]; q0 Y
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
; |2 N/ s0 m- s' Z* V% S1 U  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>' h: F: X" q9 j5 O# K& W
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>8 @- a5 W. I) s: m
</div>
2 U+ u( U# h' I
0 @+ a) \8 t* Q<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">& V; T1 Q9 X  V/ z
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
% [5 F  a* p1 ~: e3 n  \! p  <p>ddddddddddddddddddddddddddddddd</p>
1 P1 Z  O9 j' Q+ N: E: z5 T$ _</div>* d% @1 W4 B) Z* C

  C2 P3 U/ K5 t$ X' l. x) u; V- kbody 的z-index应该默认是0

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