2024从零开始使用VSCode编程（静态页面制作篇）HTML+CSS+JS阶段

本文只为记录并帮助有需要的小伙伴学习使用VScode

最早开始本人的前端代码是使用HBuilder编写的，但最近想正式转战VSCode，所以才有这系列文章
注意本教程发布于2024年7月，软件为win1.91，后续版本使用时也可参考

步骤一、新建文件夹

！！注意！！

1、文件名尽可能为英文

2、文件路径尽可能不存在中文

3、文件名不包含特殊字符

4、文件名尽可能通俗易懂

①在自己的非系统盘符（系统盘一般为C盘）下创建文件夹

作者的创建目录为D:\ProgrammingFile\VScode\StaticPage

步骤二、打开

①点击界面左上角文件

②选择打开文件夹

③打开刚刚创建的文件夹

步骤三、创建项目目录结构

①点击新建文件夹

②命名Demo1回车

③右键项目Demo1然后选择新建文件夹

④新建一个名为css的文件夹

⑤以此类推创建image文件夹、js文件夹

⑥右键项目选择新建文件（创建html文件）

⑦任意取名（！注意！后缀添加上".html"）

步骤四、编写HTML

①在html文件下输入！回车快速生成html结构

②编写html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Frontend Page</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到NPC码农的简单前端页面</h1>
    </header>
    <main>
        <p>NPC码农的简单静态前端小页面</p>
        <button id="alertButton">点击我</button>
    </main>
    <footer>
        <p>版权所有 © NPC码农2024</p>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

步骤五、编写CSS

①右键css文件夹下创建css文件

②编写css

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 头部样式 */
header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
}

/* 主内容样式 */
main {
    flex: 1;
    padding: 20px;
    text-align: center;
}

/* 按钮样式 */
button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005f6a;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

步骤六、编写JS

①右键js文件夹下创建js文件

⑤编写js

//NPC码农
// 当页面加载完成后执行的代码
document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('alertButton');
    button.addEventListener('click', () => {
        alert('按钮被点击了！');
    });
});

步骤七、运行

①回到index.html代码界面右键选择Open In Default Browser或者按住Alt+B快捷运行

运行界面如下

标签： vscode html css

本文转载自: https://blog.csdn.net/ssrsrrn/article/details/140682898
版权归原作者 npc码农 所有，如有侵权，请联系我们删除。