返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
1 [5 [- V! M( [5 C1 _
3 `, q1 L- h9 U6 f下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
. t; {4 g: F+ \, F2 D5 }% p0 t  o+ Z! ^3 I: h# K
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
" U" t& q+ [# l/ X' ]8 H! l/ k  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>% R% l6 f! m* `/ S/ m* Q$ R
  <p>sdfasdfsafsadfsad<br>  l. e6 m3 r" o2 j
  sdfdadasdfdsfasdfasdfasdf  </p>
2 `7 h/ ?9 X$ @. l1 r</div>
$ V7 |! R- ^$ Z9 w3 R# m3 S+ A6 j: {7 K1 |8 q8 ?: ]
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
. `& }% i% u& ?( a; t. e0 N: @* g9 |0 {* |
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
" g- g( r0 M9 ?# X9 J% X1 j% p0 r
6 K, W# m3 a* g9 t' t试验证明,z轴的数值越大,这一层就越靠前。
  s* E1 r1 E, ^) m# W% u0 z2 [: l0 _+ R2 w* h/ v
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
! ]( m* D4 b) z  {0 O. |5 |5 r+ E  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
% p; G* M/ R7 m( G7 x: q) j3 f. f! Y  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>' n9 ?3 y9 o8 \$ V1 Z! D* i' e; p  D
</div>( C7 E2 |4 p! \# J4 H6 w8 |" T
6 z0 d- b& i6 ?; v
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
2 {8 Y; i% U1 M1 w. W  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>/ `1 J% H% e% ]1 m
  <p>ddddddddddddddddddddddddddddddd</p>
% Y* w' |' ]( W- L</div>
9 P7 K7 n; ~; |$ A" v2 s8 H
5 k/ u% o, H7 @% _3 ]# Fbody 的z-index应该默认是0

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