首页  |  精品网站  |  原创作品秀   |  艺术设计  |  网络学院  |  信息中心  |  站内搜索  |  求职招聘  |  建站资源  |  服装网站  |  编程开发 |  设计论坛 
  平面设计 画册 VI欣赏 包装 CG-插画   酷站 个人网页 商业网站   Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校   专题欣赏 SEO 图标欣赏
域名注册 虚拟主机 广州网站建设 广州网页设计 IDC赞助 设计资源下载 虚拟主机 域名注册 品牌网站建设 服装品牌网站建设 广告服务 网站推广 娱乐
当前位置:首 页 >> 建站资源 >> 站长手册 >> 网页菜单定位问题

网页菜单定位问题

来源:http://www.cnwebshow.com.cn 被读165次

中资源
转载请注明出处-中国设计秀-cnwebshow.com

 通过前三篇文章的讲解,现在我们已经可以实现一个基本的菜单了。这一章,我们来讨论一下定位的问题。

  在前几章讲的例子中,定位都是相对于整个网页的左上角。在有一些时候,我们可能需要它相对于网页中某个元素定位,这样做在某些时候是非常有必要的,比如不会出现那种因窗口大小的改变而致使菜单与网页中的一些元素的相对位置发生变化。在第一章的最初,笔者所给的例子中就是这样做的,请参阅
《网页菜单详解(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不是很熟的朋友来讲的确很方便),而事实上这样做生成的代码的原理与上面讲的相同的。把上面讲的原理弄清楚了,使用起来会更灵活。
转载请注明出处-中国设计秀-cnwebshow.com



投稿 】【对本文进行评论】 【字体: 】【发布于2005-08-31 22:29】

相关专题:暂无相关专题

上一篇:配色常识   下一篇:黑边白线相框动作(Action)文件下载
 认证LOGO下载
     
Copyright © 2005-2007 中国设计秀_网页设计教程_优秀网页设计欣赏_平面设计欣赏 All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!中国设计秀,秀---无处不在!!
QQ:54292427  8208442 MSN:kingvisual#hotmail.com 交流群:9107036 3848215 8850631
粤ICP备05067046号 RSS