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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。, w$ J% P3 Q; H+ P

% o' m" k, f( S% h9 Q) Y下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
. I# _) v+ r4 ?" I+ z5 H# c: a1 Y/ F- S/ z4 v: _( `3 ?
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
9 E0 L! W4 A, m  b  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
. D- q3 x) _6 z" o% y( a  <p>sdfasdfsafsadfsad<br>/ X  `8 Z" B/ G+ M
  sdfdadasdfdsfasdfasdfasdf  </p>
  r$ d' n) Z' z0 n+ O</div>
2 x- @* A6 a) O4 {+ G  w8 a7 m. [
, m8 U0 ]# s$ G这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。2 G" M' h& r8 ~7 C

, \# |# K* X" I1 _- h层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。! X3 z" o; R5 d; E
0 W3 _& s$ ?" y3 Z
试验证明,z轴的数值越大,这一层就越靠前。
* ], B- }# t- b. `8 j& E: X+ X
5 Q/ a- R9 X0 _<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
8 f8 D- w+ z6 ~$ F- F+ Y+ c  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
( ]9 e0 @5 g# C8 R5 Z/ a  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
  Q' K4 l8 O  P. P; G</div>; g9 M/ R, ]# l* |, P# n
  r! G2 S: C2 _  y5 X$ w/ o+ a
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
8 V* o4 E# k' @7 F: ^  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>$ X0 V% m/ y3 o
  <p>ddddddddddddddddddddddddddddddd</p>- Z3 n3 \) t4 l! v: Z' o2 ?
</div>; R: W- i6 B) E, B6 v5 }) ]3 k6 T

4 G" |1 k; P; S6 Q3 ^body 的z-index应该默认是0

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