如何自定義你的鼠標右鍵效果？

ontext Menu是一個與用戶進行友好交互的菜單，例如鼠標的右鍵產生的效果。在網頁上單擊右鍵可以顯示頁面源碼；在圖片上右鍵會出現“保存至本地”，“另存為”等操作。

當然我們還可以自定義鼠標右鍵事件，今天我們就一起來學習下如何用原生的Javascript自定義鼠標右鍵事件。

自定義右鍵效果

首先我們來看下自定義鼠標右鍵的效果，通過單擊右鍵會出現自定義的內容，而且綁定了click事件

自定義鼠標右鍵

自定義右鍵實現

頁面構建

首先看下頁面上的代碼

頁面代碼

右鍵自定義菜單

單擊右鍵出現的菜單其實也是一段html代碼，如下所示

自定義右鍵菜單

需要用到的變量和方法

變量與方法

添加右鍵事件-事件委托

添加鼠標右鍵事件

判斷點擊位置是否位于li內部

判斷點擊位置

鼠標左鍵單擊，隱藏菜單

左鍵單擊，隱藏菜單

按下ESC鍵，隱藏菜單

按下ESC鍵，隱藏菜單

顯示自定義菜單

顯示自定義菜單

隱藏自定義菜單

隱藏自定義菜單

根據事件觸發位置返回具體點的坐標

返回具體點的坐標

自定義菜單的位置

因為在鼠標右鍵單擊的時候，菜單要出現在鼠標單擊的位置，因此需要計算出菜單欄出現的位置

自定義菜單位置

總結

上述就是完成自定義右鍵效果的核心代碼，關于樣式的代碼大家可以自行設計，如果成功了就會出現文章開始的右鍵效果。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生命是什么呢，

生命是時時刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的開發工具可以讓我們事半功倍。前面我們對HTML的相關概念和基本結構已經有了基本的了解，下面我們就來安裝在前端開發中的需要使用的開發工具及環境。

在眾多HTML編輯器中，選擇一個適合自己的工具至關重要。今天我們就來認識一下前端開發工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發環境。

一、前端開發工具簡介

在介紹 “VS Code” 之前，我們先來了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成開發環境的英文縮寫（Integrated Development Environment)，集成開發環境就是將在開發過程中所需要的工具或功能集成到了一起，比如：代碼編寫、分析、編譯、調試等功能，從而最大化地提高開發者的工作效率。

IDE 通用特點：

提供圖形用戶界面，在 IDE 中可以完成開發過程中所有工作；
支持代碼補全與檢查，并提供快速修復選項；
內置解釋器與編譯器；
功能強大的調試器，支持設置斷點與單步執行等功能。

前端開發IDE

而在前端開發中我們需要安裝一個“趁手”的IDE，幫助我們更快更高效的開發，一個好的IDE是每個程序員的必備武器。前端開發IDE有很多種，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我們可以任選一種使用。這幾種IDE的對比如下：

這么多IDE該怎么選呢？對于我們初學者來說，選擇Visual Studio Code，（簡稱VS Code）就可以了。VS code具備內置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高，且有MAC版本，應用廣泛等優點，很適合新手。

下面就和我一起下載并安裝VS code吧！

二、VS Code下載與安裝

1、進入VScode官網

官網地址：https://code.visualstudio.com/

點擊【Download】進入下載，不要點擊【Download for Windows Stable Build】，否則它會自動幫你下載User Installer用戶版本。

【Stable】：穩定版本，比較穩定。
【Insiders】：測試版本，添加了一些新東西，還在測試中，可能會存在一些Bug，不怎么穩定。

2、然后你會看見Windows，Linux，蘋果三個版本，我們選擇Windows版本，選擇System Installer 點擊【x64】進行下載，不要點擊【↓ Windows windows8,10,11】，否則它也會自動默認下載User Installer用戶版本。

【User Installer】：用戶安裝程序，VScode安裝在你電腦當前賬戶的目錄上，如果你換了一個其他賬戶登錄你的電腦，那么你就用不了之前那個賬戶下載的VScode了。

【System Installer】：系統安裝程序，VScode不會安裝在你電腦的當前賬戶上，而是直接安裝在系統上，所有賬戶都可以使用。

其實選哪個版本都無傷大雅，就算你下載了【User Installer】版本也沒事，因為沒人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來，只是有時候特殊情況換了個賬戶登錄不能使用就有一點麻煩，所以還是推薦盡量下載【System Installer】版本。

【x86】：32位操作系統。【x64】:64位操作系統，如果想知道自己是什么系統，可以敲擊Win鍵找到“設置”→“系統”→“關于”→“系統類型”。

3、正在下載

這個下載會比較慢，如果不想等可直接去找個別人下好的安裝包哦！也可找小編領取。

4、下載完后打開文件，會彈出許可協議彈窗，勾選我同意此協議，單擊【下一步】。

5、先去D盤里創建一個新文件夾取名叫“VScode”，點擊【瀏覽】按鈕修改安裝路徑，把路徑改到剛剛在D盤里創建的VScode文件夾里。如果覺得麻煩也可以直接默認安裝在C盤，然后單擊【下一步】，但還是建議安裝在D盤里。

6、修改完路徑后，單擊【下一步】。（安裝路徑是這個樣子D:\VScode\Microsoft VS Code）

7、選擇開始菜單文件夾，默認"Visual Studio Code",單擊【下一步】。

8、根據自己的需求進行勾選，勾選完單擊【下一步】。

【創建桌面快捷方式】：在桌面創建VScode快捷方式。

【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】：選中一個文件鼠標右鍵可以通過VScode打開文件。

【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】：選中一個文件夾鼠標右鍵可以通過VScode打開文件夾。

【將Code注冊為受支持的文件類型的編輯器】：對于受支持的文件類型的文件，鼠標右鍵選擇“打開方式”，可以通過“Vscode”打開。

【添加到PATH】：添加VScode文件夾里的bin目錄到PATH環境變量里，添加完以后可通過系統命令輸入code直接啟動VScode。

9、單擊【安裝】進行安裝。

10、安裝完成后單擊【完成】啟動。

三、VS code配置插件

下載完之后，大家可以根據自己的需求下載插件，這里推薦我用的比較順手的幾個。

1、下載漢化包

點擊擴展，在搜索欄搜索Chinese，選擇Chinese中文簡體點擊【Install】進行安裝。（建議少用，多看英文，這是一位優秀的程序員走向成功的標志性成長。）

安裝完后單擊【Change Language and Restart】重啟VScode軟件，刷新一下就變成中文簡體了。

2、下載【會了吧】插件

在搜索欄里搜索【會了吧】，這個是在你敲代碼時會自動識別你敲的單詞進行翻譯，如果你有一個單詞不認識，可以點進“會了吧”看看翻譯，對英語基礎差的人很友好。

3、下載【Open in browser】插件

這個是用來運行代碼，并且在瀏覽器打開，查看運行效果的，這個插件必須下，否則當你寫完HTML網頁時你無法運行，無法預覽頁面，不信你可以先試試能不能運行再回來下載。

4、下載【Live Server】插件

這個是用于實時預覽運行效果，當你使用open in browser運行代碼時，只要你的代碼有改變，你就需要手動刷新重新預覽頁面運行結果，而Live Server是自動刷新運行結果，非常方便，非常滴銀性！

四、用VScode編寫HTML代碼

1、先去D盤里創建一個新文件夾取名叫“Workspace”（名字隨便取名）。

2、進入VScode找到左上角的文件選擇點擊打開文件夾。

3、找到剛剛創建的“workspace”文件夾，單擊【選擇文件夾】。

4、找到WORKSPACRE，點擊新建文件，名字輸入“01.html”,然后點擊回車鍵創建。

5、在剛剛創建的01.html文件下輸入以下代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>這是我的第一個網頁</h1>
    </body></html>

6、鼠標右擊空白處單擊【Open In Default Browser】查看運行結果。

7、運行結果如下。

以上就是常用的前端開發工具VS Code的下載和安裝教程了，你的第一個HTML網頁運行成功了嗎？

一個高效的HTML開發工具和環境是每個前端開發者的得力助手。通過合理選擇工具、配置環境、使用框架和庫、以及不斷的調試和測試，你可以將創意轉化為現實，構建出令人驚嘆的網頁。記住，技術永遠在變，唯有不斷學習和實踐，才能讓你在這個數字世界中游刃有余。

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

、摘要

（OF作品展示）

OF之前介紹了用python實現數據可視化、數據分析及一些小項目，但基本都是后端的知識。想要做一個好看的小系統，我們還要學一些前端的知識，今天OF將講解如何用pycharm（全棧開發不錯的工具）做一張好看的網頁，以后我們就可以自己開發網頁/網站放到互聯網上。

主要內容：網頁前端布局

適用人群：Python初學者，前端初學者

準備軟件：pycharm

二、pycharm操作說明

1. 創建項目

1) 下載完成pycharm, 點擊file-New Project...

2) 按下圖步驟創建一個項目，目前我們選擇Pure python即可，以后我們可以學習用Django/flask等框架來做完整的系統

2. 創建HTML文件

1）在創建的項目空白處鼠標右鍵-New-HTML File

2）輸入英文的網頁名字，盡量不要輸入中文/特殊字符

3. HTML格式說明

當雙擊打開我們創建后的HTML文件，大家會看到下面的界面

三、網頁設計

1. 草圖繪制

在開始開發網頁前，我們需要自己設計下想要把網頁做成什么樣，為了節省成本OF都是自己設計的頁面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學習一個比較簡單的布局如下圖，大家可以看到下圖已經畫出了我們需要添加的內容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會是左右的關系，而不是上下

四、網頁開發

1. body部分

根據上述的css名字定義，先填充<body>內的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網頁測試

1）鼠標移到代碼處，在右上角我們會看到一排瀏覽器，我們點擊其中一個運行

2）目前看到的網頁內容從上到下顯示

3. head部分

首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個顏色內容框在<div id="main">中，運行結果是3個顏色的內容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現，所以在<div id=intro>里另加了個<div class=peo>，代碼如下：

(注：style中的#main對應body中的id=main, .main對應class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運行結果：

2）圖片部分是3個<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運行結果：

3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運行結果：

五、總結

今天我們學會了flex布局，今后所有的網頁排版都可以實現了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識比較基礎但非常實用，每天學會一個小技能，積少成多，以后就能成為大神。如果大家對網頁上的實現有什么不懂的，盡請留言，OF一定會一一解答的。

在線咨詢

上一篇："Webpack實戰：手把手教你輕
下一篇：初學者必備的NFT圣經：一文掌握所有NFT知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何自定義你的鼠標右鍵效果？

自定義右鍵效果

自定義右鍵實現

總結

一、前端開發工具簡介

二、VS Code下載與安裝

三、VS code配置插件

四、用VScode編寫HTML代碼

、摘 要

二、pycharm操作說明

1. 創建項目

2. 創建HTML文件

3. HTML格式說明

三、網頁設計

1. 草圖繪制

2. css名字定義

四、網頁開發

1. body部分

2. 網頁測試

3. head部分

五、總 結

您的項目需求

、摘要

五、總結