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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
% f0 I: F/ v5 ~2 s/ O: n1 U4 I/ V4 ^  V5 q/ D4 ~) l4 b
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
/ H/ g5 j- f& L$ Y' D% V3 Q
9 R3 c) g2 m9 U% Q2 U# P<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
1 n6 S- y3 _& S3 ~  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
! w# Y3 c5 o8 Y, L  <p>sdfasdfsafsadfsad<br>" J4 \" A0 J* G; o& g; L1 B
  sdfdadasdfdsfasdfasdfasdf  </p>8 W) W7 k' M1 R# z3 F$ E# U2 m
</div>
% \4 s3 k9 N7 J" s
0 I$ ~: @2 Q  U. W) q这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
5 `. i8 h4 g% n/ Y: B8 ^3 v' h' k4 t) E1 X6 ^, d. u
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
0 {% b6 x6 ~" f; X2 o+ B, j
( u9 u1 }& g3 L$ V! z" F试验证明,z轴的数值越大,这一层就越靠前。
' d3 P1 u7 x5 h9 {7 ?: U) t) {7 C
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
4 J8 U- I) ]( H; Z8 A  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>; A! y7 c, B- t) f7 m# E0 \
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
3 e0 Y0 s* L1 {9 w% o</div>6 j- ^+ d: }. R  `* L& o4 n  [. l0 j8 B
" C' W$ ]3 G) d! N8 w9 D; V
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">4 l3 T+ s$ g+ R; N
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
0 L8 O, k( A# W+ I% I- b  <p>ddddddddddddddddddddddddddddddd</p>: a2 h2 C# I- w1 p
</div>  M5 R6 _8 A$ ^  `0 J3 R% `
/ ?3 j4 t- D0 h+ O1 g
body 的z-index应该默认是0

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