分享
 
 
 

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

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

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

来介绍一下层的精确定位。

招数一:表格定位法

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

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

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

步骤3:将光标定义在父层中,再次插入一个层并设置层内容。当你使用F2打开层控制面板时会看到位于父层底下的子层(如图3),作为子层是可以拖动的,因为它相对于父层定位。

步骤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确定(如图4)。

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有