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

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。- \5 u7 W7 _( y0 ]2 {

8 v6 a* b, D3 o6 W  y4 Q1 a! A下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。6 |; P, M7 w0 y2 X9 W% \3 X
# a! W+ K; @! @) d- ~7 ?+ y
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">, i8 I% ]- s6 Z0 e
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>  Y0 R# _" ^& S' i
  <p>sdfasdfsafsadfsad<br>
7 I( ~0 l% ]& x9 |  sdfdadasdfdsfasdfasdfasdf  </p>
+ x( |" e# m8 d) o2 h, F5 \5 x0 {  w</div>
- x9 Y: i+ \: j( K
( u  M! w' E4 A这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
0 l! o# `  n2 F- ?
6 ~$ V- d" y0 B- [9 f$ R9 R# x层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。) e% R8 ~% D. J; V. U/ m1 H/ ^
2 d; ?9 S6 L9 `1 O! y
试验证明,z轴的数值越大,这一层就越靠前。9 s' P" k9 x6 f* L. N
; b, Q1 J# Q; `6 c8 K4 E/ b
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
1 f) |5 q4 d" j% ~  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
! E: q: Q! b. r% f5 d- f  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>& u& I" S8 e- Y9 [: j4 u
</div>
3 h5 H. c' I- N. g: w' a
9 C' Z9 \; `; n) f7 ^<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
8 t# ~( y% t  ?9 {9 u  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
( M4 |* J' Z$ Z1 q+ L$ F  <p>ddddddddddddddddddddddddddddddd</p>
* n( j" }4 E3 ^- M% p</div>
: _! t" g1 H, j3 F* o6 F2 z
! I9 w! J3 H/ B; ubody 的z-index应该默认是0

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