返回列表 发帖

dreamweaver mx 中层(layer) 的概念

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像Photoshop,Fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。
4 o, ~! ]( t# W: S2 o8 M% |7 E: G8 G( _# K$ P: {  a
下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。/ f# S5 x/ w4 {& @, X- j4 j  Z

% H( C( ~- L$ b3 L<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">/ N3 O$ @- l5 k$ t
  <p><a href=../../blog.csdn.net/overmind>overmind</a></p>6 D8 Q3 r5 U$ J) c- c/ P
  <p>sdfasdfsafsadfsad<br>
: q' J/ C' V! r. Y) \8 C$ Y! D6 I0 U8 ~$ o  sdfdadasdfdsfasdfasdfasdf  </p>. x9 e' N. ^3 j1 u( Y
</div>
- ?% _- ?9 o0 I
9 v4 V* W' I. n这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。
% s8 k5 c! B; D$ u
0 b5 U0 d0 O+ e$ j1 C8 E; l" ~层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。2 Z- W. B/ j. o0 M

6 p6 V* S- B/ _; B试验证明,z轴的数值越大,这一层就越靠前。9 x9 c: f, I" z* H5 m
$ B2 t% `6 g$ ~2 w$ n, s
<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">: P8 @7 |  n; o
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>" o& N7 c# {' d6 x
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>, S" q2 g8 i9 c' N
</div>
# h0 \# E. F# u4 r
; v) o. k" }# j<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
* W  D+ E9 t0 b* i' b" b0 N; H$ u$ Z/ f  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
# L6 k% ^$ K6 O+ j. P- V  <p>ddddddddddddddddddddddddddddddd</p>
  h" @3 T% D% {- G5 u</div>8 N$ m5 X  K" v5 ^) {- }
3 h6 A' E' V% z; ?7 o+ V( l, d5 d
body 的z-index应该默认是0

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