|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
H( ^ O6 q7 O+ z" E) M2 e9 Y/ A, g0 w# \
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。% K! m, S; V! J# M9 g
? }& _- k1 i! s- W<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
- l: o5 P$ Z; i$ o% n <p><a href=../../blog.csdn.net/overmind>overmind</a></p>/ s7 z. d* K' [
<p>sdfasdfsafsadfsad<br>
8 t0 H/ K' T/ W/ H sdfdadasdfdsfasdfasdfasdf </p>
: {/ ]* n! R! E% b# B7 H</div>& g* w" {: L! P
" v: G9 ]" {/ @" T这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。+ V. ^1 X; t% \4 A
" s- f: b1 K$ e' {4 j, s$ x' D层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。. T" Y- a( t( B
: ^) u$ j2 S8 P
试验证明，z轴的数值越大，这一层就越靠前。- X+ Z. y, r. o* F" x
( }" z* |2 d/ I. f0 q& y) b- L5 v<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
9 D5 v) D/ K/ z. G) g- m5 k <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>* C1 K; |3 \0 q* o- ^8 c' E
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>) E: j/ f, `1 b7 E2 q$ w4 l/ d
</div>/ R, S5 A! r$ r1 K
5 G9 S2 n6 ~+ n) D: B/ f" K<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">: P' O7 }& [# t. J; }. j
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
' c* V# |' B) m6 n <p>ddddddddddddddddddddddddddddddd</p> T( O% j/ }* R9 _' b# q+ O. r
</div>- ^: {8 B6 w& @8 R* `/ I' S
6 N( p' {" E4 P. ^! t. c
body 的z-index应该默认是0 |
|
发表于 2007-12-24 17:35
| 