论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

DIVCSS菜单:超炫的菜单一张图片实现鼠标的两种状态及CSS当前页效果

文章类别:div+css布局 | 发表日期:2008-9-26 11:28:01


  今天我们继续深入学习相关的内容,今天的这个CSS菜单形式上比较炫,在实现的时候有几个需要注重的地方:
  1、具体的分析图片格局,确定好背景图片的定位;
  2、如何隐藏掉菜单内的链接文字。21shipin.com原创

  下面的图片是今天这个CSS菜单实例的最终效果(可点击放大):


  我们看下面的XHTML代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<body id="page_a">
<ul id="nav">
<li id="navind"><a href="http://www.21shipin.com/" id="cur1" title="21shipin.com">21shipin.com首页</a></li>
<li id="navxue"><a href="http://www.21shipin.com/" id="cur2" title="Div CSS教程">Div CSS教程</a></li>
<li id="navpei"><a href="http://www.21shipin.com/" id="cur3" title="CSS布局实例">CSS布局实例</a></li>
<li id="navren"><a href="http://www.21shipin.com/" id="cur4" title="CSS2.0教程">CSS2.0教程</a></li>
<li id="navkao"><a href="http://www.21shipin.com/" id="cur5" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</body>

  我们赋予了body一个id:page_a。这是用于实现当前页效果的,我们在后面再作说明。
  我们建立了一个id为nav的无序列表ul作为菜单的容器。在菜单中有列表项五个。我们作重说说第一个,其它的四个与之类似。
  li列表项的id为navind。这是作为列表项的选择符存在的,我们可以通过此选择符控制列表项及列表项内的链接的样式。21shipin.com原创
  a链接的id为cur1。这是方便用于实现当前页的效果。我们后面会介绍如何编写CSS代码。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav { width:585px; height:55px; overflow:hidden; margin:20px auto 0 auto;}

  我们定义无序列表ul的宽度和高度,设置溢出为隐藏,距离顶部20象素,左右方向居中对齐。
  我们预先制作好如下的图片,请注重,这是一个图片文件,我们在菜单的不同部分进行不同的定位即可:(可点击放大)


  最上面一排是菜单的正常形式,第二排是菜单的鼠标悬停时的形式,最下面一排是当前页的效果。
  或许你还没有明白一张图片是如何实现的,我们通过背景图片的定们来实现,看下面的图片:(可点击放大)


  我们模拟对菜单进行分割,得到了这样的N个小区域,这每一列就是我们菜单的三个状态,而红线也标出了我们应该如何对菜单进行定位了。我们看下面的表格:


  有了这样清楚的思路,我们就可以动手编写CSS代码了。21shipin.com原创

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navxue,#navxue a,#navpei,#navpei a,#navren,#navren a,#navkao,#navkao a {
display:block;
width:116px;
height:55px;
overflow:hidden;
}

  除了最左边的21shipin.com这个菜单之外,其它四个菜单的宽度是一致的,我们对其li及链接a进行CSS样式定制,设置为块元素,宽度与高度分别是:116px、55px。设置溢出为隐藏,防止内部元素撑开容器而使页面很难看。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navind a,#navxue a,#navpei a,#navren a,#navkao a {
padding-top:60px;
overflow:hidden;
}

  我们设置所有五个菜单的a链接元素的填充距顶为60px。溢出为隐藏。这样我们就成功的实现了将菜单内的文字推到可视区域以外了。即:文字位于距顶部60px的地方,而我们的菜单高度为55px。所以文字是不可见的。仅当用户没有用完全下载CSS文件时,我们的菜单也不会失效,CSS文件未打开图片虽然看不到了,但这些文字就发挥它们的作用了,依然可以起到导航的作用。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav li { float:left; }

  设置所有的li列表项向左浮动。21shipin.com原创

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navind,#navind a {
display:block;
width:121px;
height:55px; float:left;
background:url(nav.jpg) 0 0
}
#navind a:hover { background:url(nav.jpg) 0 -55px }
#navxue a {background:url(nav.jpg) -121px 0 }
#navxue a:hover {background:url(nav.jpg) -121px -55px }
#navpei a {background:url(nav.jpg) -237px 0 }
#navpei a:hover {background:url(nav.jpg) -237px -55px }
#navren a {background:url(nav.jpg) -353px 0 }
#navren a:hover {background:url(nav.jpg) -353px -55px }
#navkao a {background:url(nav.jpg) -469px 0 }
#navkao a:hover {background:url(nav.jpg) -469px -55px }

  上面这一大段代码定义了鼠标的两种状态下菜单所表现出来的样子。结合上面两个分析图片,相应你能很快的理解这些代码的意义。只是第一个由于尺寸与其它菜单有所区别,所以单独的定义了宽与高。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#page_a #nav #navind a#cur1 {background:url(nav.jpg) 0 -110px }
#page_b #nav #navxue a#cur2 {background:url(nav.jpg) -121px -110px }
#page_c #nav #navpei a#cur3 {background:url(nav.jpg) -237px -110px }
#page_d #nav #navren a#cur4 {background:url(nav.jpg) -353px -110px }
#page_e #nav #navkao a#cur5 {background:url(nav.jpg) -469px -110px }

  我们用这些代码实现了CSS当前页的效果。我们所需要做的是给body赋予不同的id,即可实现了菜单背景图片的不同定位,而指示出当前页是在哪一个栏目。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058