标题:
dreamweaver mx 中层(layer) 的概念
[打印本页]
作者:
admin
时间:
2007-12-24 17:35
标题:
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
& _; l+ y4 k) m5 z
; e3 e2 t0 z4 B8 r( B; y3 ~ g
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
' T6 m+ F0 z' ]9 V" @ H
( \8 k# {# U( C2 `& \$ _* v
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
8 K( \4 R" h5 V+ |* y
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
% A$ w( d% Z# w7 R8 ^- v/ o. H) ]
<p>sdfasdfsafsadfsad<br>
: I- F2 p# h" M0 T# x
sdfdadasdfdsfasdfasdfasdf </p>
: A& M+ n7 B! s+ r0 A+ Z
</div>
, B7 \% `: c {4 n" U2 f. |
6 H7 C; f0 @; P: S7 ~; e; N* R# d0 q
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
w0 ]' |8 _, c5 E3 c
+ o1 r2 l; O# }/ o! {4 j
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
0 b8 c% q% A- x% D: M$ v7 ]! R
1 d! c5 M' Q! X8 f
试验证明，z轴的数值越大，这一层就越靠前。
0 h! ]5 u/ S% U5 v
6 s: @$ r+ Z P% h/ N5 J1 Z
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
( w2 o6 a( |9 u8 Q) [6 }
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
0 u$ i: A$ a" J% O1 c4 r7 N5 X: q' V
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
" D/ G4 j5 |& i$ a) X2 Y- k3 k
</div>
$ O' ?2 c! P( B- P9 _2 u
$ {8 G( n. j4 k) A$ O
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
" h7 e( F5 r5 u; {" N* Q! F
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
: F. z/ R0 S- U b- R
<p>ddddddddddddddddddddddddddddddd</p>
' S7 c q5 ?" k" k& U
</div>
4 N9 W; Z1 p7 E6 L7 l9 j+ i2 e
& S8 Y) X( M- ?9 U( r/ O0 b
body 的z-index应该默认是0
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
