实现网页制作中“层”精确定位的绝招

在制作网页的时候，我们常常会提到层。这里的层是指在Dreamweaver中，通过对他的应用来实现网页对象在垂直方向互相重叠的效果，比如使用QQ的朋友一定到腾讯主页浏览过，其下拉菜单很有特色，这就是利用层的应用来实现的。其做法很简单，有不少网友在网页中使用层便能够轻松实现，但您是否注意到当您改变显示器分辨率时，您的层还是在原来的位置上、网页能够自动地适应用户配置的分辨率吗？我想假如您不知道层的绝对定位和相对定位的概念，您是做不出腾讯主页上的下拉菜单效果的，下面就结合实例来介绍一下层的精确定位。

　　招数一：表格定位法

　　步骤1：打开Dreamweaver3，新建一个页面，使用快捷键“Ctrl Alt T”插入一个两行一列的表格，配置第二行的目的就是为了放置层，使其相对表格定位。输入文字同时配置表格属性。

　　步骤2：将光标移入第二行表格中，在这行中插入一个层，打开其属性面板，将L、T值删除，使其为空。

　　这两个参数绝对不能有数值，否则将不能实现层精确定位。当然这时的层参数已定，作为父层时该层是不能移动的，但能够使用光标改变其大小。

　　步骤3：将光标定义在父层中，再次插入一个层并配置层内容。当您使用F2打开层控制面板时会看到位于父层底下的子层，作为子层是能够拖动的，因为他相对于父层定位。

　　步骤4：为主菜单配置鼠标响应事件，显示当鼠标移到和离开该主菜单时层的显示方式就能够了。F12预览并改变分辨率，看看是否您的子菜单没有错置。

　　招数二：CSS定位法

　　上述方法毕竟不是专业设计师的期望，我们能够做一个CSS相对定位的定义方式，将相对定位模型(比如表格)定义为这个CSS属性。

　　步骤1：使浏览器以相对定位模型左上角作为原点，建立新的坐标系。再在这个相对定位模型下级插入层，使之绝对于该相对定位模型定位。当然该层也是不可拖动的，改变其位置能够直接在其属性面板上输入Left Top的数值。

　　步骤2：按“Shift F11”打开CSS Styles面板，点击“New Style”按钮，在弹出的New Style窗口中定义一个名称为.pos的CSS属性，并且选择Make Custom Style的Type类型和This Document 0nl的Define类型，确认进入Style Defintion For .pos窗口，选取Positioning定义Type为relative确定。

　　步骤3：选取定义好的表格，右键点击CSS Style面板中的.pos，弹出菜单中执行Apply命令即可。使该相对定位模型(表格)建立新的坐标系，只要我们在其中插入层，并配置层内容和主菜单的鼠标响应事件就能够使层实现相对定位了。

　　以上两招，大家不妨都试一试，若举一反三的话，一定能够做出各种使用层且自动适应用户分辨率配置的网页效果来！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有