Javascript實現(xiàn)簡易導航欄
更新時間:2021年06月16日 14:30:11 作者:6+3
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)簡易導航欄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Javascript實現(xiàn)簡易導航欄的具體代碼,供大家參考,具體內(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>導航</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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascriptvoid(0)含義以及與"#"的區(qū)別講解
今天小編就為大家分享一篇關于javascriptvoid(0)含義以及與"#"的區(qū)別講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01原生JS實現(xiàn)表單checkbook獲取已選擇的值
本文為大家介紹下采用原生JS實現(xiàn)從一個表單checkbox獲取到已選中的數(shù)據(jù)值,具體的實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07Layui table field初始化加載時進行隱藏的方法
今天小編就為大家分享一篇Layui table field初始化加載時進行隱藏的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript實現(xiàn)強制重定向至HTTPS頁面
這篇文章主要介紹了JavaScript實現(xiàn)強制重定向至HTTPS頁面,本文講解如何用JS實現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06JavaScript中removeChild 方法開發(fā)示例代碼
這篇文章主要介紹了JavaScript中removeChild 方法開發(fā)示例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實現(xiàn)代碼
這篇文章主要介紹了bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02