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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。' K5 ]* U5 }4 t/ C+ M% ~
2 d0 M6 s2 Z" ?# u
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
: {2 }0 d) w$ l* q% M$ D
" p; P$ m8 t5 x0 B9 g( z0 G<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
9 t: Q% @. s. X. D0 z$ e  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>  T& R( u: T9 i; \
  <p>sdfasdfsafsadfsad<br>7 g2 j: h3 l& e9 {) c, g
  sdfdadasdfdsfasdfasdfasdf  </p>' H  |5 e! \! ]
</div>. o  X( Z7 C. v: E" ]2 M3 w

: D9 k- m0 e  F  F这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。) k+ y# F, g; j0 W9 v

0 N6 T" D) \  ~9 r层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
& t+ @% ^# e1 L! L3 g' |9 `1 |  r! @" Q
试验证明,z轴的数值越大,这一层就越靠前。9 S: M# S5 p6 w/ r
/ E2 x! u& l, E+ V
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
' T0 A; v) R/ P/ T: {: e' o  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>0 t" G' o- P) ?! p" F. }" i, d) J
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
3 m1 \2 Q6 W3 Q* @# w, ]# t' f</div>* m  \5 L7 s1 Q- y* c
/ m  o# z/ y9 Z1 L& y6 i$ `, H2 ~
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">6 e. O$ D1 P& A& `! A% u7 G' ?$ g
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
0 B: U5 K6 Y, b8 q6 [% D6 i- B1 j  <p>ddddddddddddddddddddddddddddddd</p>8 ~& a& R2 y& `3 M
</div>
6 x: I7 G! k/ W1 u7 T* q" K$ I# I% P0 E
body 的z-index应该默认是0

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