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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
4 L- ^9 k1 V) n( H$ U3 x- U8 l+ Y! T. d9 }; C
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
. ?1 Y# h" F2 ^+ `& L' @
- B! f7 ^1 r- V<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">" g1 ]" B! H$ ]
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
( b* k3 K8 j! b4 R) I6 L9 }5 r  <p>sdfasdfsafsadfsad<br>) o" ~7 _! k( u5 P2 `; W
  sdfdadasdfdsfasdfasdfasdf  </p>
, J% i; B% ~3 b$ O</div>* Q, t0 m" r2 d7 _+ v% s$ [- C
- c, s" M! Q& p0 p( C$ u+ ^4 n
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
2 }4 U1 v; c3 l+ g5 d
# t3 b: A2 g+ T. J0 O* Z& N2 ?/ x) i: P层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。8 o+ `4 \' `* T6 U! n$ W5 Q

6 }1 I0 S+ T8 }" P试验证明,z轴的数值越大,这一层就越靠前。- o7 i  @, E! x$ w; p: X9 V

( |+ f+ [: `4 q" E) Q9 p<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">( A9 w, ~& s; i2 E+ H9 l1 h
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
: `3 N! i2 A5 c7 @( O( R# q  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>5 Y, K3 f( N+ {! n; U1 I* A; {3 m
</div>
* H- p; W8 A2 E7 k
# y+ F7 s9 G# K* v& i; V<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
6 J. o% ^0 L/ T5 `* P/ v  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>$ Z, t/ n# U, S1 n' \( M  r: y
  <p>ddddddddddddddddddddddddddddddd</p>
5 q: c  l! k- x# r, a; m; M</div>1 _5 ]- E# }, X1 s4 h

7 E9 h/ A9 v" cbody 的z-index应该默认是0

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