返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。. N$ W6 A. O0 ?2 t
! G2 K0 m1 H' e+ J% u
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。) F- g# P& o& v1 Q

( k; T0 D- S& R" L  o- N<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
* N; a1 B4 w' I" e) T0 K6 d) W  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>' N2 n$ [& K; }% b, i
  <p>sdfasdfsafsadfsad<br>
7 x/ n; V) B0 u; G+ _  o  sdfdadasdfdsfasdfasdfasdf  </p>
8 S5 O5 d  `7 e1 i3 G: ], {; v, e</div>9 _$ p9 ?9 g( ]" B! g3 b
8 D" U7 K& h+ M* b" b$ p
这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
  g. v$ _- A7 N: Y; P$ X% n' |# A6 j) h# a* T
层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。
- }/ {9 g* [3 W+ b
4 i; N0 c& Q; Z6 b- @4 V( x6 N试验证明,z轴的数值越大,这一层就越靠前。
6 Z" @; L- x$ Y: p: n) w/ Q7 q5 j) J0 q, ?' R+ F  T# S
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
6 }! h% i' f1 ]  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>& l& q+ l# O$ \" i5 W
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>3 A# Y% ~  f" ^- Z/ e
</div>/ d. Z) |8 k' B7 n
+ a4 _) U; A4 O+ j
<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
. D0 }: h4 O6 X- [: i  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>* X1 N' n; `9 j6 j
  <p>ddddddddddddddddddddddddddddddd</p>
8 s" S3 q# e  ^' h5 U6 Q0 r</div>- W* x( U9 w2 b( @3 W" {
. o/ w# w7 i' |4 [8 |8 v8 B: D; q
body 的z-index应该默认是0

返回列表
【捌玖网络】已经运行: