标题:
dreamweaver mx 中层(layer) 的概念
[打印本页]
作者:
admin
时间:
2007-12-24 17:35
标题:
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
) X, {2 J+ F' l$ P6 I7 B* j
2 {6 b) n6 p6 G& L* ^
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
/ [8 z# E7 l" O8 ?8 e
+ `5 a6 w' r! f" o6 o% M1 z* n* c
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
/ j4 q5 F8 r5 I0 @
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
' _" Y# r* n4 ?7 Z3 e% g( w
<p>sdfasdfsafsadfsad<br>
1 j" N* Z+ w3 F6 H
sdfdadasdfdsfasdfasdfasdf </p>
* u) v+ `( E. I' U& K' k; d
</div>
- F2 U0 @, o9 F }/ t
. A: G5 F6 X% V/ m9 Z% F
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
$ H) b+ R0 `1 t+ E5 \4 z: C" R) p
g* ]0 X- O0 {3 v! I& \0 W
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
* C1 P7 ]5 ]5 G
9 Z A: A; A; }7 `2 ~3 z$ i; j% j
试验证明，z轴的数值越大，这一层就越靠前。
/ \' h4 H7 Z# l* a( t3 x
% ]3 _* [' Q1 P5 d( n% H
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
& f0 j0 i7 h" h: |0 X! T' B( `: z( I
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
. T/ B7 F) F" }7 S7 Z# S
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
. A! U* F; ]* D: _2 `/ ^
</div>
. M2 S, {# |4 H) a `& B
( N [( U7 l% H, {& l$ ^
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
& g$ g8 h' U& l5 ?$ Q
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
6 |" C! Q; h i0 _8 K( G5 J7 i' _
<p>ddddddddddddddddddddddddddddddd</p>
e( i- W# R$ o1 j! d: Q& i$ r
</div>
8 ~6 Q6 z0 l7 h, t$ H; s0 m
8 w' F; c/ l+ s( R* e+ X
body 的z-index应该默认是0
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
