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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。! j# W6 |4 j4 `# ^: e
7 C8 u5 L+ b3 l# s9 \! j' H% r
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
1 q# ^2 I! f, B1 D2 {
3 U; e( K% A" I( Z<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
- c4 J5 i7 m2 i6 d0 F  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>9 P2 G/ A3 m. c, f' t- }
  <p>sdfasdfsafsadfsad<br>
" z3 w+ Z! f7 A! o7 |  sdfdadasdfdsfasdfasdfasdf  </p>
# _- n0 k( i' K8 f0 o$ t8 |! r</div>
( a8 Y: I0 s( Y; k. L, V5 l
7 [/ i: W- `0 n4 d这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。( d; v8 y, H4 T0 `  F. A
- q4 G" H$ k0 w, e( k5 R
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。) E/ I1 C3 ]& v; ^
, E0 A8 H  p# [' d" c6 D
试验证明,z轴的数值越大,这一层就越靠前。) g2 P. `. B6 a; s; v
; \" y0 ^+ W) R) v6 D
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF"># p( c  [7 K5 u) G1 b" Z
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
" q8 D% C( d# u1 K7 x  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>9 c* u$ \- t; Y
</div>: x: O4 k6 k. C* O
* E9 H% _7 r; F2 @
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
; y, }, L7 V$ F; m& i  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
8 A: F6 p. }6 }  <p>ddddddddddddddddddddddddddddddd</p>
' P8 S, B$ `  w' u+ x</div>9 g, r4 Y( F% \# B  @
* }3 I) v* S6 m( u3 ~3 e
body 的z-index应该默认是0

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