Javascript實現簡易導航欄

阿新 • • 發佈：2021-06-18

本文例項為大家分享了javascript實現簡易導航欄的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" conte程式設計客棧nt="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:nohttp://www.cppcns.comne;
        }
  http://www.cppcns.com        #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"> 
網站首頁</button>
                    <button type="button" id="b1">網站新聞</button>
                    <button type=程式設計客棧"button" id="b1">網站趣聞</button>
                    <button type="button" id="b1">網站論壇</button>
                    <button type="button" id="b1">網站介紹</button> 
                    <button type="button" id="b2">招納賢士</button>
                    
            </div>
              
             
    </div>
     </div>
</body>
</html>

效果圖：

Javascript實現簡易導航欄

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

Javascript實現簡易導航欄

本文例項為大家分享了javascript實現簡易導航欄的具體程式碼，供大家參考，具體內容如下

JavaScript實現HTML導航欄下拉選單

JavaScript實現HTML導航欄下拉選單[懸浮顯示] 前端介面進行設計時，我們會遇到滑鼠懸浮在某選項上，然後就會憑空顯示出選單出來，這種設計的確受到了很多人的青睞。其實純css也是可以實現的，但是會有一些限制，必須

JavaScript實現HTML導航欄下拉選單[懸浮顯示]

此文轉載自：https://blog.csdn.net/Gorho/article/details/110086605 JavaScript實現HTML導航欄下拉選單[懸浮顯示]

JavaScript實現簡易tab欄切換內容欄

本文例項為大家分享了javascript實現簡易tab欄切換內容欄的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易tab欄切換案例

本文例項為大家分享了javascript實現簡易tab欄切換效果的具體程式碼，供大家參考，具體內容如下

Vue+Router+Element實現簡易導航欄

本專案為大家分享了Vue+Router+Element實現簡易導航欄的具體程式碼，供大家參考，具體內容如下

javascript實現簡易的計算器

利用javascript實現簡易的計算器，供大家參考，具體內容如下 1、先構思整個計算器的模式以及想要實現的功能，按模組建立相應的div，在“head”中設定其樣式和佈局。

JavaScript實現簡易聊天對話方塊(加滾動條)

今天看了幾個JS的視訊，老師佈置了一個編寫一個簡易聊天對話方塊的任務，沒有涉及到Ajax.主要實現了切換頭像模擬兩方的聊天情況，樣式比較簡單，後期可以進行美化。

javascript實現簡易數碼時鐘

本文例項為大家分享了javascript實現簡易數碼時鐘的具體程式碼，供大家參考，具體內容如下

Javascript實現簡易天數計算器

本文例項為大家分享了Javascript實現簡易天數計算器的具體程式碼，供大家參考，具體內容如下

javascript實現簡易計算器功能

本文例項為大家分享了javascript實現簡易計算器的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易計算器小功能

本文例項為大家分享了JavaScript實現簡易計算器的具體程式碼，供大家參考，具體內容如下

JavaScript實現音樂導航效果

本文例項為大家分享了JavaScript實現音樂導航效果的具體程式碼，供大家參考，具體內容如下

JavaScript實現網頁tab欄效果製作

JS網頁–tab欄製作，供大家參考，具體內容如下在網頁的製作中，通常會使用到tab欄，例如淘寶，商品詳情，規格引數和累計評價三個欄，點選不同的欄下面出現的內容不同。在這樣的設計中，JS可以做到。

uni-app實現頂部導航欄顯示按鈕+搜尋框

技術標籤：uni-app 這個功能在小程式不可以，在app可以，屬於app-plus範疇app-plus文件

JavaScript實現簡易加法計算器

本文例項為大家分享了javascript實現加法計算器的具體程式碼，供大家參考，具體內容如下

如何用uni-app實現頂部導航欄顯示按鈕和搜尋框

最近公司準備做app，最終決定使用uni-app框架開發，但是當把設計圖給我的時候我心裡有點沒底，因為他的設計圖頂部長成這個樣子：

基於JavaScript實現簡易計算器

本文例項為大家分享了javascript實現簡易計算器的具體程式碼，供大家參考，具體內容如下

Vue實現tab導航欄並支援左右滑動功能

本文主要介紹：利用實現tab導航欄，並且通過flex佈局實現左右滑動，計算按鈕的位置，當點選第一屏展示的最後一個且還有元素未展示時，自動滑動顯示出未顯示的元素。

JavaScript實現簡易購物車最全程式碼解析（ES6面向物件）

本文例項為大家分享了實現簡易購物車的具體程式碼，供大家參考，具體內容如下