论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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,表格,视频教程

CSS菜单:一个图片构建菜单的三种状态一例!

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

  这是一个非常棒的效果。也实现了非常巧妙的构思,一张图片实现了菜单的多种效果,并且通过body设置id的方式,实现了当前页菜单。
  看下面的效果图:


  下面是css代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
body {
background: #f1efe2;
}
#header {
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
}
ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}
body#welcome ul#nav { background: transparent url(nav_f_2.png) no-repeat 0 0; }
body#products ul#nav { background: transparent url(nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav { background: transparent url(nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav { background: transparent url(nav_f_2.png) no-repeat 0 -66px; }
ul#nav li a {
position: absolute;
top: 0;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:22px; /* IE5/Win */
background: transparent url(nav_f_2.png) no-repeat;
}
body#welcome li#wel a { background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover { background-position: 0 0; }
body#welcome li#pro a { background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover { background-position: -94px 0px; }
body#welcome li#sup a { background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover { background-position: -178px 0; }
body#welcome li#con a { background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover { background-position: -262px 0; }
body#products li#wel a { background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover { background-position: 0 -22px; }
body#products li#pro a { background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover { background-position: -94px -22px; }
body#products li#sup a { background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover { background-position: -178px 0; }
body#products li#con a { background-position: -262px -88px; left: 262px; }
body#products li#con a:hover { background-position: -262px 0; }
body#support li#wel a { background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover { background-position: 0 -44px; }
body#support li#pro a { background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover { background-position: -94px -44px; }
body#support li#sup a { background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover { background-position: -178px -44px; }
body#support li#con a { background-position: -262px -88px; left: 262px; }
body#support li#con a:hover { background-position: -262px 0; }
body#contact li#wel a { background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover { background-position: 0 -44px; }
body#contact li#pro a { background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover { background-position: -94px 0; }
body#contact li#sup a { background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover { background-position: -178px -66px; }
body#contact li#con a { background-position: -262px -66px; left: 262px; }
body#contact li#con a:hover { background-position: -262px -66px; }
p { text-align: center; }
p a { color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em { font-style: normal; border-bottom: 1px solid #999; }
p a:hover em { color: #333; border-bottom: 0; }


  我们看下面的xhtml代码(welcome2.html):

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>
</ul>
</div>
</body>

    请你非凡注重:body id="welcome" 这句代码实现了不同的当前页效果。在其它三个页面中,基本的代码没有任何改变。就只是改变了body id=""。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058