返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
. t4 s) F" u' d6 g4 L/ k$ ?/ d5 y8 u) D1 u: N
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。0 g( B; Z$ {: _* {! O9 B, u

* @8 c* F4 t' V& q<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">" n  F. ^/ y4 W( [7 B5 @
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
* g$ p6 I3 H, F4 U+ C5 e# p" l  <p>sdfasdfsafsadfsad<br>* \2 D" k% j& `$ W9 k6 ]. O$ u" `
  sdfdadasdfdsfasdfasdfasdf  </p>
% W* W+ v1 G6 D0 r* V6 K! ^</div>4 g9 d, }5 j9 F( S4 H

* E7 q8 d, N1 S6 U) E. n. q& x这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
" z9 _/ f/ O3 h3 K% Z" e* C, w4 V; I: h( G) q
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。& V9 P* D4 Q' N1 Q! d
/ q; }1 N" m" Z
试验证明,z轴的数值越大,这一层就越靠前。# |$ W7 ~% }$ ^! C# t2 [  ^* {
# F* [* w5 _7 h; `
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
( |* _$ w3 |; N' u" `9 ?  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>) |' Q$ n  P1 r; K3 e
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
) n1 k7 S4 _5 Y6 Z: }: ^8 [# J6 T</div>7 j! V0 z; b5 Q# U, B
  @7 b! X: C1 B9 ?3 ~
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
, {; _/ W' U8 h: j3 P, i/ J  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
$ J6 j* Z  S. _  <p>ddddddddddddddddddddddddddddddd</p>
) r3 o$ u! T, f! }. w</div>
6 Q  f7 Q' C* [5 @  m# @# w
1 y( w: r5 I) Ibody 的z-index应该默认是0

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