Board logo

标题: dreamweaver mx 中层(layer) 的概念 [打印本页]

作者: admin    时间: 2007-12-24 17:35     标题: dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。) X, {2 J+ F' l$ P6 I7 B* j
2 {6 b) n6 p6 G& L* ^
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
/ [8 z# E7 l" O8 ?8 e+ `5 a6 w' r! f" o6 o% M1 z* n* c
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
/ j4 q5 F8 r5 I0 @  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
' _" Y# r* n4 ?7 Z3 e% g( w  <p>sdfasdfsafsadfsad<br>
1 j" N* Z+ w3 F6 H  sdfdadasdfdsfasdfasdfasdf  </p>* u) v+ `( E. I' U& K' k; d
</div>
- F2 U0 @, o9 F  }/ t
. A: G5 F6 X% V/ m9 Z% F这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。$ H) b+ R0 `1 t+ E5 \4 z: C" R) p
  g* ]0 X- O0 {3 v! I& \0 W
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。* C1 P7 ]5 ]5 G
9 Z  A: A; A; }7 `2 ~3 z$ i; j% j
试验证明,z轴的数值越大,这一层就越靠前。
/ \' h4 H7 Z# l* a( t3 x
% ]3 _* [' Q1 P5 d( n% H<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
& f0 j0 i7 h" h: |0 X! T' B( `: z( I  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>. T/ B7 F) F" }7 S7 Z# S
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
. A! U* F; ]* D: _2 `/ ^</div>
. M2 S, {# |4 H) a  `& B( N  [( U7 l% H, {& l$ ^
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">& g$ g8 h' U& l5 ?$ Q
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
6 |" C! Q; h  i0 _8 K( G5 J7 i' _  <p>ddddddddddddddddddddddddddddddd</p>  e( i- W# R$ o1 j! d: Q& i$ r
</div>
8 ~6 Q6 z0 l7 h, t$ H; s0 m8 w' F; c/ l+ s( R* e+ X
body 的z-index应该默认是0




欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2