Javascript實(shí)現(xiàn)簡易導(dǎo)航欄
本文實(shí)例為大家分享了Javascript實(shí)現(xiàn)簡易導(dǎo)航欄的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導(dǎo)航</title>
</head>
<style>
button{
width:80px;
height:25px;
border:none;
}
#b1{
background-image: url('1.png');
margin-right:0px;
}
#b2{
background-image: url('1.png');
width:380px;
height:25px;
text-align: left;
}
#b1:hover{
background-image: url('2.png');
}
#b2:hover{
background-image: url('2.png');
}
</style>
<body>
<div style="width: 800px;margin:0px auto">
<div>
<img src="1.jpg" width="100%" height="150px%">
</div>
<div>
<div style="font-size: 1px">
<button type="button" id="b1">網(wǎng)站首頁</button>
<button type="button" id="b1">網(wǎng)站新聞</button>
<button type="button" id="b1">網(wǎng)站趣聞</button>
<button type="button" id="b1">網(wǎng)站論壇</button>
<button type="button" id="b1">網(wǎng)站介紹</button>
<button type="button" id="b2">招納賢士</button>
</div>
</div>
</div>
</body>
</html>
效果圖:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- JS滾動(dòng)到指定位置導(dǎo)航欄固定頂部
- js導(dǎo)航欄單擊事件背景變換示例代碼
- 一步步教大家編寫酷炫的導(dǎo)航欄js+css實(shí)現(xiàn)
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù))
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果
相關(guān)文章
微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
在社交小程序里有個(gè)常見的場景是關(guān)注功能,我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例,講解一下關(guān)注功能如何實(shí)現(xiàn)2022-08-08
javascriptvoid(0)含義以及與"#"的區(qū)別講解
今天小編就為大家分享一篇關(guān)于javascriptvoid(0)含義以及與"#"的區(qū)別講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01
原生JS實(shí)現(xiàn)表單checkbook獲取已選擇的值
本文為大家介紹下采用原生JS實(shí)現(xiàn)從一個(gè)表單checkbox獲取到已選中的數(shù)據(jù)值,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07
Layui table field初始化加載時(shí)進(jìn)行隱藏的方法
今天小編就為大家分享一篇Layui table field初始化加載時(shí)進(jìn)行隱藏的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面
這篇文章主要介紹了JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面,本文講解如何用JS實(shí)現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06
JavaScript中removeChild 方法開發(fā)示例代碼
這篇文章主要介紹了JavaScript中removeChild 方法開發(fā)示例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02

