整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。
我们可以任选一种使用。这几种IDE的对比如下：
这么多IDE该怎么选呢？对于我们初学者来说，选择Visual Studio Code，（简称VS Code）就可以了。VS code具备内置功能非常丰富、插件很全且安装简单、轻量、对电脑的配置要求不算很高，且有MAC版本，应用广泛等优点，很适合新手。
下面就和我一起下载并安装VS code吧！
1、进入VScode官网
官网地址：https://code.visualstudio.com/
点击【Download】进入下载，不要点击【Download for Windows Stable Build】，否则它会自动帮你下载User Installer用户版本。
2、然后你会看见Windows，Linux，苹果三个版本，我们选择Windows版本，选择System Installer 点击【x64】进行下载，不要点击【↓ Windows windows8,10,11】，否则它也会自动默认下载User Installer用户版本。
其实选哪个版本都无伤大雅，就算你下载了【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、安装完成后单击【完成】启动。
下载完之后，大家可以根据自己的需求下载插件，这里推荐我用的比较顺手的几个。
1、下载汉化包
点击扩展，在搜索栏搜索Chinese，选择Chinese中文简体点击【Install】进行安装。（建议少用，多看英文，这是一位优秀的程序员走向成功的标志性成长。）
安装完后单击【Change Language and Restart】重启VScode软件，刷新一下就变成中文简体了。
2、下载【会了吧】插件
在搜索栏里搜索【会了吧】，这个是在你敲代码时会自动识别你敲的单词进行翻译，如果你有一个单词不认识，可以点进“会了吧”看看翻译，对英语基础差的人很友好。
3、下载【Open in browser】插件
这个是用来运行代码，并且在浏览器打开，查看运行效果的，这个插件必须下，否则当你写完HTML网页时你无法运行，无法预览页面，不信你可以先试试能不能运行再回来下载。
4、下载【Live Server】插件
这个是用于实时预览运行效果，当你使用open in browser运行代码时，只要你的代码有改变，你就需要手动刷新重新预览页面运行结果，而Live Server是自动刷新运行结果，非常方便，非常滴银性！
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
1) 下载完成pycharm, 点击file-New Project...
2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统
1）在创建的项目空白处鼠标右键-New-HTML File
2）输入英文的网页名字，尽量不要输入中文/特殊字符
当双击打开我们创建后的HTML文件，大家会看到下面的界面
在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。
我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下
根据上述的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>1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行
2）目前看到的网页内容从上到下显示
首先我们简要了解下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一定会一一解答的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
