您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> Dreamweaver教程 >> 文章正文
[组图]Dreamweaver MX教程：在居中页面使用层           ★★★
Dreamweaver MX教程：在居中页面使用层
作者：佚名 　文章来源：天极网 　点击数： 　更新时间：2008-1-22 18:20:17　
　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 【字体：小 大】

　　在居中页面中使用层，最大的问题就是层的定位问题，当改变显示器分辨率后，层相对其它居中元素就会改变位置。本文介绍层相对其它居中元素不会错位的方法。

　　层的绝对定位和相对定位

　　层的绝对定位代码:

以下是引用片段：
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>

　　层的相对定位代码:

以下是引用片段：
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>

　　在居中页面中，插入相对定位层代码，层的位置在页面居中。但是它变得不可移动，使用不够方便。

　　插入绝对定位代码，当left和top含有正负数值，层就无法居中。当清除left和top属性后，层可以居中，相对页面其它居中元素没有错位现象。

　　描绘层和插入层的差别

　　使用描绘层:

　　在一个居中的页面中，使用描绘层的代码:

　　使用插入层:

　　

　　在一个居中的页面中，使用插入层的代码：

以下是引用片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>div</title> 
</head> 
<body> 
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div> 
<div align="center"></div> 
</body> 
</html>

　　因为使用“描绘层”生成的代码不在居中代码之中，所以，在居中页面中，要使层相对其它元素没有错位现象，就必须使用插入层。

　　在居中页面中，常用两种方法，实现层相对其它居中元素没有错位现象。

[1] [2] 下一页

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：Rainsion    责任编辑：Rainsion 　【字体：小 大】
　
  • 上一篇文章：

    • 　
  • 下一篇文章： 没有了
    		•
    最新文章
    相关文章
    巧用背景颜色和间距快速制作出细边线表格
    Dreamweaver教程：创建模板
    Dreamweaver教程：常用工具栏
    Dreamweaver教程：菜单概述
    Dreamweaver教程：窗口布局
    DW做ASP程序时关于数据库的几个常见问题
    用Dreamweaver进行网页优化
    Flash中有关层的深度处理的常用函数
    用Dreamweaver MX 2004的Flash动画元素
    Photoshop结合Dreamweaver制作网页相册
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    发表评论：
    　姓　　名： 评 分： 1分 2分 3分 4分 5分
    　评论内容： ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点，与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门