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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。" @+ h* B4 f7 @8 @$ Z6 `( p
4 ?" k8 U; u; v& Q) ]- n
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。$ l" H6 a, \# C2 |
' a+ t  N! \8 I$ @! @- |
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
" c( B8 x, O' h" I- }  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
' g) ~) q* M" `  <p>sdfasdfsafsadfsad<br>9 S* Z1 s. x2 C& n( ^; G% K
  sdfdadasdfdsfasdfasdfasdf  </p>
: x% e/ m8 X7 @  F; O/ X0 Q</div>7 b& U4 o. h" @# N0 p
% D# F7 V% H! _" S0 W7 I4 ?
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。. g( ]+ i, a1 @# Z
: e3 N. @8 h( r
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。: i; e' u/ b# }# ~0 T8 K. V

6 n; q" @$ q; g. i) t& |: |" Y+ B试验证明,z轴的数值越大,这一层就越靠前。
' Q( r. d! K/ g( E2 [. [8 t: K. E8 h$ X9 o8 K% E
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
; U5 n, W/ e% J7 V  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
! W+ `% {, |0 B& W  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
' k+ e, J6 X. S' c! {  [</div>+ ^$ e% y' C7 c; ?) j2 l

  P. Q$ w+ n# s5 P8 C6 R<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
8 a' Y3 E4 ]3 D: M  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
/ a4 F6 H% C6 x9 q- p* v7 g  <p>ddddddddddddddddddddddddddddddd</p>
& w) D) d+ i! `* W' W</div>0 m" a& W' |* ^

1 A9 w8 J9 h) J3 ibody 的z-index应该默认是0

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