获得本站免费赞助空间请点这里
返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
- G+ b2 [) v. i; [& ?2 K
: X6 T" S( L* v下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。
7 C  ~7 e6 D4 }! u
- T$ H9 u/ k& S0 i" U, _<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">' O1 y0 i) Y# O: }* G
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>" {7 j% ?# ?! F9 ], q0 M; t
  <p>sdfasdfsafsadfsad<br>: @- D- b/ r- S6 s3 W: l9 I
  sdfdadasdfdsfasdfasdfasdf  </p>' o; I" X* C' j8 }2 b( }/ W9 _
</div>! {, d: u, s5 y& h( B

, ^: u; d2 G) Q8 C6 w+ l# x2 N1 o这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
, J& u3 N; y; i  h5 h7 t
9 U( r. x, t+ a" z' C层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。% v: y6 q, T3 ], U' Q; ]

/ r, T5 C" q8 `2 q: p试验证明,z轴的数值越大,这一层就越靠前。
: _& S: T, L4 r" B" e( v
5 G  q' e" }" g: t<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
. p7 E' a0 ], h& E( m  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
, W- t( T  h4 j4 N  x. J9 U7 F3 Q* j  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>0 i) Z; h. T" S; l$ K
</div>
" j! w) h% j: h. ~+ r' n! a0 V
$ I' l8 b. }8 H9 K<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF"># s$ g* C* B' b, m  D8 f' D
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>  c6 W9 S! }2 ^  d8 w" W
  <p>ddddddddddddddddddddddddddddddd</p>' T" M5 k1 {1 Q6 v* a
</div>6 |+ Y/ q( N6 e$ Y0 f% A! f) {" J3 v
0 K$ r* b0 t( X# s) s1 |
body 的z-index应该默认是0

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