ddc
联网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
广州网站建设 上海网站设计 网站建设 上海网站建设 网站建设 广州网站设计 虚拟主机 域名注册 虚拟主机 广州网站建设 虚拟主机 域名注册 ACG动漫家园 ACG大玩家 上海网站建设 品牌设计 网站建设
网站建设
网站建设
品牌设计
中国设计秀
中国设计秀企业频道
时代网
中资源
当前位置:网站综合首页 >> 建站资源 >> 站长手册 >> 网页菜单定位问题

网页菜单定位问题

来源:中国设计秀    作者:    点击:23     加入收藏    发表评论
0
顶一下
 通过前三篇文章的讲解,现在我们已经可以实现一个基本的菜单了。这一章,我们来讨论一下定位的问题。

  在前几章讲的例子中,定位都是相对于整个网页的左上角。在有一些时候,我们可能需要它相对于网页中某个元素定位,这样做在某些时候是非常有必要的,比如不会出现那种因窗口大小的改变而致使菜单与网页中的一些元素的相对位置发生变化。在第一章的最初,笔者所给的例子中就是这样做的,请参阅
《网页菜单详解(1):基本原理》

  在那里我们很方便把就把这个菜单插入到了网页中,而菜单不会相对菜单按钮的位置发生变化。下面我们就看看如何来实现。

  在第一章,我们讲过position,当它取值absolute的时候,即绝对定位。既然是定位,就要有参照物。一般来讲,这个定位的参照物是body(即整个网页)的左上角,但如果其父级元素中有设置了position:absolute的元素,那么它的参照物就是该元素。知道了这样一个特性,我们就可以很容易的来实现了。

  另外,有一点在这里必须要着重说明一下,前面同时也讲过,当position的值为relative时,就是相对定位,为什么不用它来实现呢?我们必须要正确理解这里所谓的相对定位:它是指相对于原来在HTML中的位置所发生的偏移,而它仍占据原来在HTML中所占据的位置。而我们现在的菜单需要“悬浮”在网页元素之上,而这只有当position设为absolute时才可以做到。

  通过上面的讲述,我们应该可以大致的了解其实现的原理了。下面就看看刚才在上面看到的那个菜单的代码(注意里面的注释会帮你加深理解)。

-------------------------------------------------------------------------------
<FONT size=1><FONT size=2><style type=text/css> td,div { font: normal 12px 宋体; } a { color: #F8F8F8; text-decoration: none; } a:hover { color: #F8F8F8; text-decoration: underline; } </style> <div style="background-color:#3366CC;width:68px;text-align:center; padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;" onmouseover="myMenu.style.display='block'" onmouseout="myMenu.style.display='none'"> <!--上面的DIV就是我们看到的按钮部分,它并未涉及任何定位的部分, 不要与下面两个混淆。--> <div style="position:absolute;width:0px;height:0px;overflow:visible;"> <!--注意上面的DIV,设置了position:absolute,但是并没有设置left/top, 所以这时它仍与一个普通的HTML元素一样,出现在它应该出现的位置。--> <div id=myMenu style="position:absolute;left:-10px;top:18px; display:none;width:90px;background-color:#3366CC; padding:5px;text-align:left;"> <!--它的定位是相对于前一个DIV而不是Body, 因为前一个DIV设置了position:absolute--> <a href=#none>Link 1</a><br> <a href=#none>Link 2</a><br> <a href=#none>Link 3</a><br> <a>...</a><br> <a href=#none>Link N</a><br> </div> </div> <a href=#none>菜单实例</a> </div></FONT></FONT>-------------------------------------------

  请仔细理解上面的代码,相信大家对用CSS进行绝对定位会有一个更深层次的认识!

  这里说一句题外话:这种定位可以用Dreamweaver来实现(这对于对JS不是很熟的朋友来讲的确很方便),而事实上这样做生成的代码的原理与上面讲的相同的。把上面讲的原理弄清楚了,使用起来会更灵活。
2005-08-31 22:29:26    出处:http://www.cnwebshow.com.cn
Google
热点文章/相关文章

音乐
嫁衣 画心 放生 天亮了 牡丹江 那滋味 擦肩而过 怀念过去 北京欢迎你 突然好想你 吻的太逼真 说好的幸福呢 坐上火车去拉萨 没有人比我更爱你
愚爱 心碎 稻香 带我走 醉赤壁 魔杰座 我还想她 明天过后 一定要爱你 等爱的玫瑰 原谅我一次 越单纯越幸福 最后一次的温柔 给我一首歌的时间
白狐 光荣 降临 下雨天 小酒窝 樱花草 恋爱新手 说唱脸谱 红色高跟鞋 寂寞才说爱 深深爱过你 爱上你是个错 即使知道要见面 不是因为寂寞才想你
城府 假如 花海 兰亭序 棉花糖 舍不得 最后一次 女人如烟 外滩十八号 我们的纪念 我们的无奈 心在跳情在烧 爱上你是我的错 爱情里没有谁对谁错
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口