返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
, @& R  P  f$ H+ z7 N" |
; \/ j) _0 g9 J% \; }0 ?6 `+ m下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
$ C# `, G! T+ @& [9 ]. i9 v) a, J0 e7 ]' V4 t6 \
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
' A: j2 H# k+ \, p9 [. }! S  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>0 Y3 E' Z+ ?: T
  <p>sdfasdfsafsadfsad<br>5 K2 u* P% @# B# S. G8 f! ?3 t
  sdfdadasdfdsfasdfasdfasdf  </p>5 \7 C# ]3 ^' k5 m5 T5 A
</div>: j, q$ _% t4 w  H: D: P* n: j% ]
$ S1 s3 W2 m- b( e0 e4 a) g
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。$ h& U) R+ h3 J
; N. E9 s& i  }
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。' w4 g9 K! _% |9 b% k8 W
7 _) R7 x9 c& `! d, G. a# V
试验证明,z轴的数值越大,这一层就越靠前。
- Y, O; t4 h" Z" i7 I9 M
$ u; p& I4 X6 b8 m( Z$ a<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
1 z! \% u, z" \- w  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
( J8 F8 u- V) x- c6 j" N4 \  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
/ \3 |. o4 o( p5 |</div>; x1 Q6 b! l. a9 F( p% A

& X! |1 Y5 l5 Z9 V7 O<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
, g& x) \6 ]: e( ?/ _6 P  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>1 {; B1 k, W- z! [
  <p>ddddddddddddddddddddddddddddddd</p>
* }5 S6 @' b$ G6 t</div>
6 \! I6 `9 _- L4 L* o! M; b! n, q. x& S- G' b4 q4 s
body 的z-index应该默认是0

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