|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14189
- 金币
- 2385
- 威望
- 1647
- 贡献
- 1333
|
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
+ C$ [1 S+ `. _& }
$ R7 @* f' T# s( |, H2 N下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
7 r7 a9 X4 b$ H* g& T0 Z
/ V8 S8 @# U# z/ Y4 p2 _0 _, R# X<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
% ]. h2 C' K, n7 p! C* z( B <p><a href=../../blog.csdn.net/overmind>overmind</a></p>' [& W1 r$ t o
<p>sdfasdfsafsadfsad<br>5 S: ]4 T4 G; v3 \
sdfdadasdfdsfasdfasdfasdf </p>
; N! ]; ~- f- p9 H</div>5 Y+ O& ]5 ^7 g# v3 n1 _5 P b
3 [& [3 S4 N# r0 p$ j n
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。1 o( V) X& G$ M- L' y: f; G
* |* B7 @5 I! U) K! a) A! p/ T
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。- e1 u- Y8 ~/ ~* ~5 r! H: g
- x3 O7 d* n p4 r* I5 h X5 M M9 b
试验证明，z轴的数值越大，这一层就越靠前。0 O. o3 f# u1 a" q6 z! u9 Q5 g1 H
) N, v i9 X( x6 O/ ~ I
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">7 H1 d s3 @8 \0 S, l1 i) C$ y
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
3 M" A9 U" J# T7 {4 j6 R$ S <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>% y4 n. L/ ?$ J9 l6 ~
</div>
# I5 I$ b! L/ J4 ]: B
: A8 K: h y. _: S, c<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">2 E3 a2 R! e8 Q( v. \9 A% D8 r
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
3 `2 h& m' }) d$ R <p>ddddddddddddddddddddddddddddddd</p>
7 l9 ~! v7 w( c' q</div>( h) h/ ^+ b0 `
* A$ B4 G5 L) Z. E. H
body 的z-index应该默认是0 |
|
发表于 2007-12-24 17:35
| 