当前位置:主页>dreamweaver>文章内容
dreamweaver mx 中层 layer 的概念
来源: 作者: 发布时间:2007-04-04  
 

dreamweave 是一款好用的网页制作软件,网页也是平面设计,就像photoshop,fireworks一样,这就使我们的软件有了曾这样一种概念,就像上述软件中的图层的概念一样,在页面上一层一层的进行制作。但是这个限制比较大,所制作的东西都在一个矩形框里面。

下面我们添加一个层,插入-〉布局对象-〉层,这样我们就添加了相应的一个层,让我们来看一下他的代码。

<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 59px; top: 51px;">
  <p><a href=http://blog.csdn.net/overmind>overmind</a></p>
  <p>sdfasdfsafsadfsad<br>
  sdfdadasdfdsfasdfasdfasdf  </p>
</div>

这就是一个层,设置了简单的位置和大小,z-index:1表示图层的z轴位置,通过访问id,可以用js来操作一个层的动作。

层的默认颜色是透明的,如果改成background-color:#FFFFFF",那么层地下的东西就不可见了,都被白色挡住了。

试验证明,z轴的数值越大,这一层就越靠前。

<div id="Layer1" style="position:absolute; width:250px; height:181px; z-index:1; left: 165px; top: 124px; background-color:#FFFFFF">
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>

<div id="Layer2" style="position:absolute; width:250px; height:181px; z-index:2; left: 236px; top: 142px; background-color:#FFFFFF">
  <p>ccccccccccccccccccccccccccccccccccccccccccc</p>
  <p>ddddddddddddddddddddddddddddddd</p>
</div>

body 的z-index应该默认是0


 
上一篇:Dreamweaver MX 2004视频宝典教程(113)   下一篇:Dreamweaver MX 2004视频宝典教程(114)
 
  相关文章
·Dreamweaver MX 2004视频宝典教程(113)
·Dreamweaver MX 2004视频宝典教程(114)
·Dreamweaver MX 2004视频宝典教程(112)
·Dreamweaver MX 2004视频宝典教程(115)
·Dreamweaver MX 2004视频宝典教程(111)
·Dreamweaver MX 2004视频宝典教程(116)
·Dreamweaver MX 2004视频宝典教程(110)
·Dreamweaver MX 2004视频宝典教程(117)
·Dreamweaver MX 2004 做信息公告系统
·用Dreamweaver实现不同分辨率下的层定
·Dreamweaver MX 2004做信息公告系统(9)
·Dreamweaver MX 2004视频宝典教程(118)
 
【关闭窗口】
推荐本站资源
最新文章