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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
4 \9 w! _( F/ o3 m* F+ F, D
6 a# k9 e; S* s1 T% X下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
8 K5 x6 `- S: v7 G* f
8 _2 ~1 L* B9 z% U& s; x<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;"># p$ F+ e9 s7 v6 R9 C+ r# A* o; ?- A9 z
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
0 t8 r# t3 U) y( M6 M& y. _( G" w  <p>sdfasdfsafsadfsad<br>/ x4 `. h: ~1 [7 m! }" B7 ^- p
  sdfdadasdfdsfasdfasdfasdf  </p>& z8 P9 Y4 |. o, j
</div>+ z1 L) `6 K' e
, ^' Q0 q0 q- a4 m( k6 X
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
6 E# S5 Y8 o; u- }2 L& S6 i) s; ~% R2 t1 R
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。- M" X/ f4 r5 v( L. @

# R5 _0 r% O+ ?试验证明,z轴的数值越大,这一层就越靠前。* j% Q; I' j% y: ^

" t: H" _* e1 Q# t4 P9 x0 C<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">* a' x2 h  w: s9 k
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
- G1 b/ a6 b  o9 S9 o6 _! @( r  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>$ m0 x  @) [, l2 _0 a
</div>
: \# W. e. p( N% [
  L! u# S, o' W) a4 D8 T1 f8 X) R<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">! a$ J7 W5 _! q( e
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
5 o8 U  e5 l* L: Y  <p>ddddddddddddddddddddddddddddddd</p>
  `4 `3 f. Q  i+ u! w: \</div>& }3 Z4 m( x$ m$ y" S  u

6 q4 x9 U4 E! R9 ]- mbody 的z-index应该默认是0

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