手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >div+css实现鼠标经过背景高亮的导航菜单代码
div+css实现鼠标经过背景高亮的导航菜单代码
摘要:本文实例讲述了div+css实现鼠标经过背景高亮的导航菜单代码。分享给大家供大家参考。具体如下:这是一款鼠标经过后切换背景的导航菜单,简单明...

本文实例讲述了div+css实现鼠标经过背景高亮的导航菜单代码。分享给大家供大家参考。具体如下:

这是一款鼠标经过后切换背景的导航菜单,简单明了,给新手学习。已测试,兼容IE6、7、8、9,Firefox3、4、5、6,Chrome5以上,Opera,Safare,搜狗,遨游,360,TT ......

运行效果截图如下:

div+css实现鼠标经过背景高亮的导航菜单代码1

在线演示地址如下:

http://demo.jb51.net/js/2015/div-css-mouse-bg-show-nav-menu-codes/

具体代码如下:

<!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>

<title>鼠标经过切换背景的导航菜单</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

<>

</style>

</head>

<body>

<h1>办公一百分导航菜单,简单明了,给新手学习。</h1>

<p>已测试,兼容IE6、7、8、9,Firefox3、4、5、6,Chrome5以上,Opera,Safare,搜狗,遨游,360,TT ......</p>

<div id="nav">

<ul>

<li><a href="#">首 页</a></li>

<li><a href="#">业内新闻</a></li>

<li><a href="#">Word教程</a></li>

<li><a href="#">Excel教程</a></li>

<li><a href="#">PPT教程</a></li>

<li><a href="#">其它教程</a></li>

<li><a href="#">专题教程</a></li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的div+css网页设计有所帮助。

【div+css实现鼠标经过背景高亮的导航菜单代码】相关文章:

用css实现透视效果

CSS各种文字对齐方式代码

鼠标经过背景变色之CSS+DIV方法

纯css实现的tab切换效果

一款纯css实现的垂直时间线效果

鼠标经过图标动画效果

css实现文字过长显示省略号的方法

css让图片等比例缩小的代码

用css3实现当鼠标移进去时当前亮其他变灰效果

纯css实现的下拉菜单只有边框底纹用到图片

精品推荐
分类导航