手机
当前位置:查字典教程网 >网页设计 > 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实现的鼠标经过文本时提示的信息

css3实现input输入框颜色渐变发光效果代码

css实现body背景图片水平垂直居中方法

用css实现十字的布局示例代码

如何用CSS自定义鼠标显示的形状

让多个div在同一行显示的样式及html代码

CSS3实现的炫酷菜单代码分享

巧用CSS3 border实现图片遮罩效果代码

用css实现透视效果

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

精品推荐
分类导航