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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
0 i1 G6 B1 z5 {
4 z$ k6 S6 X6 Y下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
6 z! O1 j) S3 B: d
# a. p0 r7 ]( g( h9 P<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">. w% I0 B; }- X# l3 l: s4 l7 f- A
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>
# J7 Y8 V! w' a- C, s9 |4 D0 v  s  <p>sdfasdfsafsadfsad<br>9 j3 L7 l# B0 j8 i: q
  sdfdadasdfdsfasdfasdfasdf  </p>( X1 ]1 t2 ]0 h5 P
</div>& y% H& X" N% F

4 y2 K& V- U* U0 [3 ?* _这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
/ V$ ~3 s) _( e% F& C3 N( e9 r
" O7 B. v& R) k* M/ l2 w层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
% T/ }& R' u  L6 y7 n  J# h/ ~3 q5 M* U
试验证明,z轴的数值越大,这一层就越靠前。* o" y0 i1 z: p

( D+ l+ P- @8 r& e( D  M8 _) ]<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">; o8 n& w8 K  f; D
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
/ N. z9 p8 L, N9 e  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>! w2 @5 I6 J" n
</div># g7 M& X/ t5 D# L; q# u' O% d
$ u4 u9 T: @2 C$ k! y8 J
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
- R) t$ S4 L2 L9 o% [( `; d  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
8 y$ r( H3 R' V2 P' |2 }$ Q, U  <p>ddddddddddddddddddddddddddddddd</p>8 n9 v4 ]- P% K- D+ d/ u7 W  E
</div>
  D$ F8 a* B& {3 q( z" u$ `
. [! ~$ R9 H/ S  A3 s0 p+ Ubody 的z-index应该默认是0

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