div+css實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)背景高亮的導(dǎo)航菜單代碼
我要評(píng)論本文實(shí)例講述了div+css實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)背景高亮的導(dǎo)航菜單代碼。分享給大家供大家參考。具體如下：
這是一款鼠標(biāo)經(jīng)過(guò)后切換背景的導(dǎo)航菜單，簡(jiǎn)單明了，給新手學(xué)習(xí)。已測(cè)試，兼容IE6、7、8、9，F(xiàn)irefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-mouse-bg-show-nav-menu-codes/
具體代碼如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠標(biāo)經(jīng)過(guò)切換背景的導(dǎo)航菜單</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>辦公一百分導(dǎo)航菜單,簡(jiǎn)單明了，給新手學(xué)習(xí)。</h1>
<p>已測(cè)試，兼容IE6、7、8、9，F(xiàn)irefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......</p>
<div id="nav">
<ul>
<li><a href="#">首 頁(yè)</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>
希望本文所述對(duì)大家的div+css網(wǎng)頁(yè)設(shè)計(jì)有所幫助。
相關(guān)文章
div+css實(shí)現(xiàn)軟件公司網(wǎng)站藍(lán)色導(dǎo)航菜單代碼
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)軟件公司網(wǎng)站藍(lán)色導(dǎo)航菜單代碼,基于div+css實(shí)現(xiàn)漂亮的導(dǎo)航效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-11div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果,是一款非常美觀大方的藍(lán)色導(dǎo)航菜單效果,鼠標(biāo)滑過(guò)可顯示對(duì)應(yīng)的背景圖片,需要的朋友可以參考下2015-08-26div+css實(shí)現(xiàn)仿豬八戒首頁(yè)導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)仿豬八戒首頁(yè)導(dǎo)航菜單效果,涉及css實(shí)現(xiàn)鼠標(biāo)結(jié)合動(dòng)態(tài)背景變換效果的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-26DIV CSS制作的個(gè)性水平導(dǎo)航菜單實(shí)例-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
先看下效果: CSS樣式代碼: 以下為引用的內(nèi)容： #pointermenu{ border-top: 7px solid black; /*optio2008-10-17
純css3實(shí)現(xiàn)無(wú)圖片的div高亮顯示特效
純css3實(shí)現(xiàn)的div高亮顯示效果，無(wú)圖片，當(dāng)鼠標(biāo)放上去是會(huì)突出高亮顯示2013-02-27
html5+css3實(shí)現(xiàn)的動(dòng)畫(huà)鼠標(biāo)懸停遮罩圖片高亮顯示效果源碼
這是一款html5+css3實(shí)現(xiàn)的動(dòng)畫(huà)鼠標(biāo)懸停遮罩圖片高亮顯示效果源碼，請(qǐng)?jiān)诨鸷戎С諧SS3屬性瀏覽器下瀏覽,熱愛(ài)特效的你可不要錯(cuò)過(guò)，希望本文可以幫助到你2014-10-17CSS實(shí)現(xiàn)輸入框的周圍高亮效果讓邊框發(fā)亮
在輸入框周圍出現(xiàn)了亮光，或者說(shuō)陰影造成邊框發(fā)亮的假象，這就是我所說(shuō)的高亮效果，要實(shí)現(xiàn)也不難，看看下面的示例就知道了2014-09-05
css3實(shí)現(xiàn)燈光高亮?xí)r鐘效果無(wú)任何js代碼
一款純css3實(shí)現(xiàn)的，沒(méi)有任何js代碼的時(shí)鐘特效2014-03-05
CSS3實(shí)現(xiàn)的輸入框動(dòng)態(tài)邊框獲得焦點(diǎn)后高亮顯示效果
無(wú)需圖片可以實(shí)現(xiàn)文本框的邊框高亮顯示，獲得焦點(diǎn)后的高亮顯示效果2013-09-09
