div+css實現(xiàn)鼠標經(jīng)過背景高亮的導航菜單代碼
發(fā)布時間：2015-09-12 16:49:21 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了div+css實現(xiàn)鼠標經(jīng)過背景高亮的導航菜單代碼,涉及css樣式設置的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了div+css實現(xiàn)鼠標經(jīng)過背景高亮的導航菜單代碼。分享給大家供大家參考。具體如下：
這是一款鼠標經(jīng)過后切換背景的導航菜單，簡單明了，給新手學習。已測試，兼容IE6、7、8、9，F(xiàn)irefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......
運行效果截圖如下：
在線演示地址如下：
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>鼠標經(jīng)過切換背景的導航菜單</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body,td,th {font-size: 13px;}
h1 {font-size:13px; font-weight:normal; margin:20px auto;}
a:link,a:visited {color:#333333;text-decoration:none;}
#nav {
width:960px;margin-top:3px;text-align:center;background:url(images/bg_nav.gif) repeat-x;border:1px solid #CCC;}
#nav ul{width:700px;margin:0 auto;height:25px;padding:0;text-align:center;background-color:#CCC;border-bottom:5px solid #FFF;}
#nav li {padding:0;list-style: none;display:inline;}
#nav a {float:left;overflow:hidden;width:100px;height:25px;color:#333333;text-decoration:none;background:url(images/nav.gif) top left no-repeat;padding-top:5px;}
#nav a:hover {background-position:0 -30px;}
-->
</style>
</head>
<body>
<h1>辦公一百分導航菜單,簡單明了，給新手學習。</h1>
<p>已測試，兼容IE6、7、8、9，F(xiàn)irefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......</p>
<div id="nav">
<ul>
<li><a href="#">首 頁</a></li>
<li><a href="#">業(yè)內(nèi)新聞</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>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠標經(jīng)過切換背景的導航菜單</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body,td,th {font-size: 13px;}
h1 {font-size:13px; font-weight:normal; margin:20px auto;}
a:link,a:visited {color:#333333;text-decoration:none;}
#nav {
width:960px;margin-top:3px;text-align:center;background:url(images/bg_nav.gif) repeat-x;border:1px solid #CCC;}
#nav ul{width:700px;margin:0 auto;height:25px;padding:0;text-align:center;background-color:#CCC;border-bottom:5px solid #FFF;}
#nav li {padding:0;list-style: none;display:inline;}
#nav a {float:left;overflow:hidden;width:100px;height:25px;color:#333333;text-decoration:none;background:url(images/nav.gif) top left no-repeat;padding-top:5px;}
#nav a:hover {background-position:0 -30px;}
-->
</style>
</head>
<body>
<h1>辦公一百分導航菜單,簡單明了，給新手學習。</h1>
<p>已測試，兼容IE6、7、8、9，F(xiàn)irefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......</p>
<div id="nav">
<ul>
<li><a href="#">首 頁</a></li>
<li><a href="#">業(yè)內(nèi)新聞</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網(wǎng)頁設計有所幫助。
相關文章
div+css實現(xiàn)軟件公司網(wǎng)站藍色導航菜單代碼
這篇文章主要為大家介紹了div+css實現(xiàn)軟件公司網(wǎng)站藍色導航菜單代碼,基于div+css實現(xiàn)漂亮的導航效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-11div+css實現(xiàn)藍色vista風格css導航菜單效果
這篇文章主要為大家介紹了div+css實現(xiàn)藍色vista風格css導航菜單效果,是一款非常美觀大方的藍色導航菜單效果,鼠標滑過可顯示對應的背景圖片,需要的朋友可以參考下2015-08-26- 這篇文章主要為大家介紹了div+css實現(xiàn)仿豬八戒首頁導航菜單效果,涉及css實現(xiàn)鼠標結(jié)合動態(tài)背景變換效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-26
DIV CSS制作的個性水平導航菜單實例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
先看下效果: CSS樣式代碼: 以下為引用的內(nèi)容： #pointermenu{ border-top: 7px solid black; /*optio2008-10-17
純css3實現(xiàn)的div高亮顯示效果，無圖片，當鼠標放上去是會突出高亮顯示2013-02-27
html5+css3實現(xiàn)的動畫鼠標懸停遮罩圖片高亮顯示效果源碼
這是一款html5+css3實現(xiàn)的動畫鼠標懸停遮罩圖片高亮顯示效果源碼，請在火狐等支持CSS3屬性瀏覽器下瀏覽,熱愛特效的你可不要錯過，希望本文可以幫助到你2014-10-17CSS實現(xiàn)輸入框的周圍高亮效果讓邊框發(fā)亮
在輸入框周圍出現(xiàn)了亮光，或者說陰影造成邊框發(fā)亮的假象，這就是我所說的高亮效果，要實現(xiàn)也不難，看看下面的示例就知道了2014-09-05
一款純css3實現(xiàn)的，沒有任何js代碼的時鐘特效2014-03-05
CSS3實現(xiàn)的輸入框動態(tài)邊框獲得焦點后高亮顯示效果
無需圖片可以實現(xiàn)文本框的邊框高亮顯示，獲得焦點后的高亮顯示效果2013-09-09
