注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

山林客

简单不一定幸福,但幸福其实可以很简单。

 
 
 

日志

 
 
关于我

2004年毕业于中山大学,毕业后专注于网站开发和网络工程技术。先后取得SCWCD、CCNP认证,对Asp/Java有丰富的开发经验,对网络工程也有较深的研究。真诚欢迎大家多多指教、多多指点、多多指正,共同分享IT道路和人生道路上的喜怒哀乐。

网易考拉推荐

纯CSS的菜单栏图片切换  

2009-01-10 22:30:53|  分类: Web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

目前,很多网站都已经转向Web标准,Web标准主要涉及的是XHTML和CSS的操作,如果熟练掌握了Web标准,将对网页的前台界面设计起到非常大的效果,例如在传统HTML下很难实现或须借助JavaScript来实现的一些效果,如菜单图片的切换、网页换肤、图片剪切、数据图表等,在Web标准底下,借助CSS即可轻松实现。

本例用到的图片只有一张,图片是一张将三种不同背景效果的矩形从上到下依次放置,每个矩形的高度是30px,因为我们需要做出当前菜单项、普通菜单项和鼠标选中的菜单项三种状态,所以整张图片将有三个不同风格的矩形,图片的总高度是90px。

 纯CSS的菜单栏图片切换 - 瑞志.net - 山林客

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

#header{
width:802px;
height:98px;
background:url(img/headerbg.gif);
}
#nav{
height:30px;
list-style:none;
float:right;
margin-top:50px;
}
#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
text-align:center;
padding-top:8px;
display:block;
width:80px;
height:22px; /*内边距8px+本身高度22px,所以占位的高度为30px,刚好是背景图(其中一格)的高度*/
background:url(img/nav.gif);
margin-left:2px;
}
#nav li a:hover{
background:url(img/nav.png);
background-position:0px -30px; /*背景图中每一格的高度为30px*/
color:#000000;
}
#nav li a#current{
background:url(img/nav.png);
background-position:0px -60px;
color:#000000;
}


</style>

</head>

<body>

<div id="header">
 <ul id="nav">
  <li><a href="#" id="current">首页</a></li>
  <li><a href="#">日志</a></li>
  <li><a href="#">论坛</a></li>
  <li><a href="#">视频</a></li>
  <li><a href="#">软件</a></li>
  <li><a href="#">商城</a></li>
 </ul>
</div>

</body>
</html>

 

 

  评论这张
 
阅读(2258)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018