返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
7 b. Q* D6 ]! v1 G( |+ g9 v% |% w$ h, D0 g
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
8 Q7 z! E. \/ Q( e( x5 \2 I, w" r
! N4 f+ H! T, }2 U  Z* u<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
+ G5 G- U; \- Z9 K  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
; r' e( d' d* w( {* `2 c2 \0 A  <p>sdfasdfsafsadfsad<br>  e# ^1 K0 E* g, y
  sdfdadasdfdsfasdfasdfasdf  </p>
, O; }% d( t0 c</div>
  L# s8 ~6 y6 N* f! J7 F& Q+ h& M( ?  _( ~3 ~/ s
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。2 C/ i2 ~6 I6 l( `: ?+ M
3 w3 q& ?8 |7 [3 G! {" W( G" u( U
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。! U) C' N" u2 j9 ~
0 l" F' k$ K! O) u2 G+ R+ G5 w& x
试验证明,z轴的数值越大,这一层就越靠前。
5 S4 W7 d$ Y3 o/ t8 Y9 b# \9 I
+ u) v2 J8 \- R- y8 B# v: k<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">' @9 y: z- x# Z; U. `( b
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
0 u2 B) |3 D& e# w8 F9 s  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
9 x. g! c% p4 v- G- t+ Z" y. n. O  ]</div>  h1 |. ^7 X' Z8 K  C  Q/ h6 P
$ I9 W+ U: T0 ~0 p' {. b/ V
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">+ H3 o1 }* v7 e: m* U; J
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
1 ]+ m9 q2 [# Y% e# l% v+ E  <p>ddddddddddddddddddddddddddddddd</p>- e7 V$ |; Y: B; s# e
</div>
! \6 G* M* p: Y3 {% E4 d+ t7 N, U( w# C
- Q( u/ a' M! `" P8 ~( jbody 的z-index应该默认是0

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