标题:
dreamweaver mx 中层(layer) 的概念
[打印本页]
作者:
admin
时间:
2007-12-24 17:35
标题:
dreamweaver mx 中层(layer) 的概念
dreamweave 是一款好用的网页制作软件，网页也是平面设计，就像Photoshop,Fireworks一样，这就使我们的软件有了曾这样一种概念，就像上述软件中的图层的概念一样，在页面上一层一层的进行制作。但是这个限制比较大，所制作的东西都在一个矩形框里面。
9 Y4 K& y- [! l) H) i. g5 j8 h$ Z
, @3 h8 E/ `( t- }" u4 v
下面我们添加一个层，插入-〉布局对象-〉层，这样我们就添加了相应的一个层，让我们来看一下他的代码。
5 D5 {# X, \' P$ }! `
) w- B$ Z$ Y4 U- K$ |7 ?; _
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
* j z: `$ p2 z' m
<p><a href=../../blog.csdn.net/overmind>overmind</a></p>
$ I3 P8 f: }. p7 W, U! e% Q# J- z
<p>sdfasdfsafsadfsad<br>
' u9 N( f/ C8 a6 b( ?( y7 a' S
sdfdadasdfdsfasdfasdfasdf </p>
" P% ` Y0 x2 @# i* j- P
</div>
( o# L% t9 ^/ O) V2 {1 v% c
8 T/ f2 t$ d& Z$ n" j+ _
这就是一个层，设置了简单的位置和大小，z-index:1表示图层的z轴位置，通过访问id,可以用js来操作一个层的动作。
~# H/ i& y" e5 `( ~$ D; q- i
) }2 Y, R' K; o; t
层的默认颜色是透明的，如果改成background-color:#FFFFFF"，那么层地下的东西就不可见了，都被白色挡住了。
8 H' m8 C; f6 K; t
3 P( k2 y6 {" P2 d
试验证明，z轴的数值越大，这一层就越靠前。
2 L l2 }$ ~/ b# a9 Q0 \
& S( j* b. Z7 K% [9 c
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
( s: Y1 i- I [# a! I( W
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
) c' V8 a8 o" e. ?5 w# M7 j3 |- J% y3 h
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
. b' w, t* E1 }+ F( j
</div>
. {6 ]2 f5 r( Q, {5 V
7 h3 T# K+ ^3 [1 _. N) ^# N
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
8 d+ R$ [8 Y$ M) ], e0 v R
<p>ccccccccccccccccccccccccccccccccccccccccccc</p>
( i# a7 p ~: n7 v4 w
<p>ddddddddddddddddddddddddddddddd</p>
; Q' H7 G( a6 W" u r
</div>
3 S4 E! A+ b$ O. x3 _% v0 W
! L0 n8 _0 J2 m% ~, g
body 的z-index应该默认是0
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
