返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
8 _$ S, z( V' z# x! D* Q- A; I; R% H8 q% A* z9 p$ M: j$ ^
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
( P. ]+ i; Z3 M; h0 J4 q1 `( @! k- ?( a+ X5 V0 x+ s. z1 N
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">9 D1 R0 t5 h7 D! `% _6 _& L& T
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>: Y2 Q7 g) G. p
  <p>sdfasdfsafsadfsad<br>0 |9 L: U- r' Q1 j/ F: A) S
  sdfdadasdfdsfasdfasdfasdf  </p>
" i: H+ b, X! M$ i9 Z</div>
  P- \5 F( u, _* x# n1 B) W, U
, ?2 X# q  `- p4 U  J9 R+ e这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
3 D2 d7 [. D0 Z3 b' L% ?6 g  d7 }: F. J0 s
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。: L1 Z) s. g& [+ S& q2 e

  O  H) j- D* }试验证明,z轴的数值越大,这一层就越靠前。
$ ?! _* Y. i7 l: s) e! N8 Q8 U  c+ _+ q. E
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">8 v- V$ u. h# |. k
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>! ]4 b7 n4 n, l, f% o8 [  j
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
+ Z1 I9 v3 M% N7 M3 Z" s/ ^</div>, L! R0 x+ Q+ \# T; L2 I$ P' d0 j  O. R
+ p" i7 w# f! z; G
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">' M' L& K: s2 k3 a" {8 s# f
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
. \* u( C$ f( N- h8 V* Y  i  <p>ddddddddddddddddddddddddddddddd</p># x4 c3 R) ]0 c" T. F
</div>
! Z3 e- S' ~9 s8 W: J  V
- Z; C0 U% x9 _: ]body 的z-index应该默认是0

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