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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
4 M  J3 J3 ]) {2 W1 k! Z! K: O. \5 ]  t  C, \" y$ G4 D; S9 Y
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
$ P7 v$ R$ ^6 {4 K/ a& [! @1 K* s% Z; E4 g7 U
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;"># `8 V0 c7 e9 z/ L* N
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
' M4 z/ C- n7 ^  <p>sdfasdfsafsadfsad<br>1 G0 }0 m, p5 V: n% D
  sdfdadasdfdsfasdfasdfasdf  </p>
) d# A# p5 A  `( @</div>
  @9 g. i+ W8 x9 j* E( U
* r8 D, H/ p9 M这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
2 g! _6 c7 H1 |
8 R; T( R  \! }: h1 V& p. ~+ X3 C层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。# w( s+ {3 h/ l

  b" j- p1 f, u3 K: U试验证明,z轴的数值越大,这一层就越靠前。- k, U- ]% Q  v' ]
% _" ]5 A) [" u) _
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">/ F7 V+ g7 v( K* L4 t% Z
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>4 g1 E; ]# O4 q$ e/ A; N
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
/ ^% I" `! [$ |( K, W( |</div>( [  d0 A# i: G* G0 N

$ C1 m5 q+ b& e( s<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
# T4 h8 X( C* a; W/ I7 f8 ]: L  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>) b7 }4 F6 [% G, V6 i8 X
  <p>ddddddddddddddddddddddddddddddd</p>- C4 q! f3 |! o+ ?
</div>
! Z4 B* L8 o& {3 ]/ L2 V0 Y9 w" t  {, }1 w# P* }
body 的z-index应该默认是0

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