docs(web): 添加web开发学习笔记及配置
添加web开发学习笔记目录及相关文档，包括HTML/CSS/JavaScript基础知识讲解和练习示例。同时更新vuepress配置以支持新内容： 1. 新增web开发导航栏入口 2. 添加web笔记模块配置 3. 启用demo插件支持
This commit is contained in:
祀梦
@@ -27,7 +27,8 @@ export default defineUserConfig({
|
||||
math: {
|
||||
type: 'katex',
|
||||
},
|
||||
mermaid: true
|
||||
mermaid: true,
|
||||
demo: true,
|
||||
},
|
||||
/**
|
||||
* 编译缓存，加快编译速度
|
||||
|
||||
@@ -33,6 +33,10 @@ export default defineNavbarConfig([
|
||||
text: 'Solidity',
|
||||
link: '/programming/solidity/',
|
||||
},
|
||||
{
|
||||
text: 'Web 开发',
|
||||
link: '/programming/web/',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -141,11 +141,23 @@ const linux = defineNoteConfig({
|
||||
}
|
||||
]
|
||||
})
|
||||
const web = defineNoteConfig({
|
||||
dir: 'programming',
|
||||
link: '/programming/web/',
|
||||
sidebar: [
|
||||
{ text: "Web 开发学习笔记", link: "/programming/web/" },
|
||||
{
|
||||
text: "基础知识", prefix: "/basic-syntax", items: [
|
||||
{ text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
/**
|
||||
* 导出所有的 note
|
||||
*/
|
||||
export default defineNotesConfig({
|
||||
dir: 'notes',
|
||||
link: '/',
|
||||
notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, cryptography],
|
||||
notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, cryptography, web],
|
||||
})
|
||||
|
||||
5
docs/notes/programming/web/README.md
Normal file
5
docs/notes/programming/web/README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Web 开发学习笔记
|
||||
createTime: 2025/10/28 21:23:18
|
||||
permalink: /programming/web/
|
||||
---
|
||||
535
docs/notes/programming/web/basic-syntax/html-css-js.md
Normal file
535
docs/notes/programming/web/basic-syntax/html-css-js.md
Normal file
@@ -0,0 +1,535 @@
|
||||
---
|
||||
title: Web 前端基础讲解
|
||||
createTime: 2025/10/28 21:23:48
|
||||
permalink: /programming/web/basic-syntax/html-css-js/
|
||||
---
|
||||
|
||||
## 前端开发到底是什么？
|
||||
|
||||
前端开发，简单来说，就是**你能在网页上看到和互动的一切**。
|
||||
|
||||
想象一下你正在看一个网站：
|
||||
|
||||
* **文字、图片、按钮、菜单**：这些都是前端开发人员用代码“画”出来的。
|
||||
* **点击按钮会发生什么、输入框能打字、图片能放大缩小**：这些互动效果也是前端开发人员用代码实现的。
|
||||
|
||||
所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：
|
||||
|
||||
1. **HTML**：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
|
||||
2. **CSS**：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
|
||||
3. **JavaScript**：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。
|
||||
|
||||
总而言之，前端开发就是让网站变得好看、好用、能互动。
|
||||
|
||||
## 开发工具
|
||||
|
||||
进行前端开发，我们需要一个好用的“工具箱”。其中，**Visual Studio Code (VS Code)** 是一个非常受欢迎且功能强大的选择。
|
||||
|
||||
VsCode 官网：[https://code.visualstudio.com/](https://code.visualstudio.com/)
|
||||
|
||||
**为什么推荐 VS Code？**
|
||||
|
||||
* **免费且开源**：你可以免费使用它，并且它的代码是公开的，有很多人一起维护和改进。
|
||||
* **轻量级但功能强大**：它启动速度快，占用资源少，但通过安装各种“插件”，可以实现非常多的功能，比如代码高亮、智能提示、调试、版本控制等等。
|
||||
* **支持多种语言**：不仅对 HTML、CSS、JavaScript 有很好的支持，也支持其他很多编程语言。
|
||||
* **丰富的生态系统**：有大量的插件可以帮助你提高开发效率，比如 Live Server（实时预览网页）、Prettier（代码格式化）等。
|
||||
* **跨平台**：无论你使用 Windows、macOS 还是 Linux，都可以安装和使用 VS Code。
|
||||
|
||||
### VsCode 前端开发插件推荐
|
||||
- **Chinese (Simplified) Language Pack for Visual Studio Code**：中文语言包，方便中文用户使用。
|
||||
- **Live Server**：实时预览网页，修改代码后自动刷新。
|
||||
- **Prettier**：代码格式化，保持代码风格统一。
|
||||
- **HTML CSS Support**：HTML 和 CSS 代码智能提示。
|
||||
|
||||
参考文章：
|
||||
1. [VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了](https://blog.csdn.net/2303_82176667/article/details/137193809)
|
||||
2. [快速上手web前端开发（超详细教程）](https://blog.csdn.net/2303_82176667/article/details/137193809)
|
||||
|
||||
## HTML5 基础知识讲解
|
||||
|
||||
HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。
|
||||
|
||||
HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。
|
||||
|
||||
标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。
|
||||
|
||||
一个简单的 HTML 实例，用于初步的了解效果：
|
||||
```html title='index.html'
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>祀梦的花园(notes.simengweb.com)</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的第一个标题</h1>
|
||||
<p>我的第一个段落。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。
|
||||
|
||||
### HTML5 文档分析
|
||||
我们以前面的样例代码为例，来对 HTML 文档进行讲解
|
||||
|
||||
第一行：`<!DOCTYPE html>`，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。
|
||||
|
||||
第二行：`<html>`，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`<html>` 和 `</html>` 之间的内容就是文档的主体。
|
||||
|
||||
第三行到第六行：`<head>`，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。
|
||||
|
||||
第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。
|
||||
|
||||
第五行：`<title>祀梦的花园(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
|
||||
|
||||
第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。
|
||||
|
||||
第八行：`<h1>我的第一个标题</h1>`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。
|
||||
|
||||
第九行：`<p>我的第一个段落。</p>`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。
|
||||
|
||||
小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。
|
||||
|
||||
## CSS3 基础知识讲解
|
||||
|
||||
CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。
|
||||
|
||||
CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。
|
||||
|
||||
一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。
|
||||
|
||||
一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>祀梦的花园(notes.simengweb.com)</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的第一个标题</h1>
|
||||
<p>我的第一个段落。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
body {
|
||||
background-color:#d0e4fe;
|
||||
}
|
||||
h1 {
|
||||
color:orange;
|
||||
text-align:center;
|
||||
}
|
||||
p {
|
||||
font-family:"Times New Roman";
|
||||
font-size:20px;
|
||||
}
|
||||
```
|
||||
:::
|
||||
这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。
|
||||
```html
|
||||
<link rel="stylesheet" href="style.css">
|
||||
```
|
||||
然后通过浏览器打开 index.html 就可以看到效果啦。
|
||||
|
||||
### CSS 文档分析
|
||||
|
||||
我们以前面的样例代码为例，来对 CSS 文档进行讲解
|
||||
|
||||
第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `<body>` 元素的样式规则。
|
||||
- `body` 是“选择器”，表示要把样式应用到整个网页主体。
|
||||
- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。
|
||||
|
||||
第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `<h1>` 元素的样式规则。
|
||||
- `h1` 是“选择器”，对应 HTML 中的一级标题。
|
||||
- `color:orange;` 把标题文字设为橙色。
|
||||
- `text-align:center;` 让标题在水平方向上居中显示。
|
||||
|
||||
第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `<p>` 元素的样式规则。
|
||||
- `p` 是“选择器”，对应 HTML 中的段落。
|
||||
- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。
|
||||
- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。
|
||||
|
||||
小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。
|
||||
|
||||
## JavaScript 基础知识讲解
|
||||
|
||||
JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：
|
||||
- 响应用户操作（点击、输入、滚动等）
|
||||
- 修改页面内容与样式（增删节点、改文字/颜色）
|
||||
- 与服务器通信、处理数据与状态
|
||||
- 实现动画与复杂交互逻辑
|
||||
|
||||
下面用一个小示例，演示 JS 如何让页面产生交互效果：
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>祀梦的花园(notes.simengweb.com)</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- 样式写在外部 CSS 中 -->
|
||||
<!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
|
||||
<!-- 这里在 body 末尾通过 src 引入外部脚本 -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的第一个标题</h1>
|
||||
<p id="message">我的第一个段落。</p>
|
||||
|
||||
<button id="btn">点我试试</button>
|
||||
<input id="name" placeholder="输入你的名字" />
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab script.js
|
||||
```js
|
||||
// 等页面元素加载完成后再执行（避免找不到节点）
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const msg = document.getElementById('message'); // 选择段落节点
|
||||
const btn = document.getElementById('btn'); // 选择按钮
|
||||
const nameInput = document.getElementById('name'); // 选择输入框
|
||||
|
||||
// 点击按钮，修改段落文本与颜色
|
||||
btn.addEventListener('click', () => {
|
||||
msg.textContent = '你点击了按钮！';
|
||||
msg.style.color = 'green';
|
||||
console.log('按钮被点击'); // 打开浏览器控制台可见
|
||||
});
|
||||
|
||||
// 输入时，实时更新欢迎语
|
||||
nameInput.addEventListener('input', (e) => {
|
||||
const name = e.target.value.trim();
|
||||
msg.textContent = name ? `你好，${name}！` : '我的第一个段落。';
|
||||
});
|
||||
});
|
||||
```
|
||||
:::
|
||||
|
||||
### JavaScript 文档分析
|
||||
我们以前面的样例代码为例，来对 JS 的关键点进行讲解：
|
||||
|
||||
- `<script src="script.js"></script>`：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `</body>` 之前，避免脚本执行时页面元素尚未加载。
|
||||
- `document.addEventListener('DOMContentLoaded', ...)`：等待文档结构加载完成再运行 JS，确保能获取到页面元素。
|
||||
- `document.getElementById('...')`：选择页面中的元素节点，便于后续读写或绑定事件。
|
||||
- `addEventListener('click'/'input', ...)`：给元素绑定事件监听器，描述“发生什么事时要做什么”。
|
||||
- `textContent / style`：修改文本与内联样式，从而即时改变页面显示效果。
|
||||
- `console.log(...)`：在开发者工具控制台输出调试信息，便于观察程序执行。
|
||||
|
||||
### 小提示
|
||||
- 打开浏览器开发者工具（F12），切到“Console”能查看 `console.log` 输出；在 “Elements”/“Inspector” 面板能查看并调试 DOM 结构与样式。
|
||||
- 在 VSCode 中使用 “Live Server”，保存 `script.js` 后浏览器会自动刷新，方便快速迭代。
|
||||
- 现代 JS 推荐使用 `const` 与 `let` 替代 `var`；多用箭头函数与模板字符串（如 `` `你好，${name}` ``）让代码更简洁。
|
||||
|
||||
到这里，我们已经分别了解了 HTML（结构）、CSS（样式）与 JavaScript（交互）三者如何协同工作。接下来可以尝试把它们组合起来，做一个小页面练手。
|
||||
|
||||
## 动手练习：小作业（只改 HTML/CSS，JS 已提供）
|
||||
|
||||
目标：做一个“欢迎卡片”，包含标题、说明文字、输入框与按钮。
|
||||
- 点击按钮时切换页面主题（浅色/深色），JS 会自动完成；
|
||||
- 输入名字时实时显示欢迎语；
|
||||
- 你只需要修改 HTML 和 CSS 来达到视觉与布局效果。
|
||||
|
||||
### 作业要求（验收标准）
|
||||
- 卡片居中显示，具有圆角、阴影与内边距；
|
||||
- 标题居中，段落有合适的行高与间距；
|
||||
- 按钮有悬停（hover）与按下（active）的视觉反馈；
|
||||
- 输入框获得焦点（focus）时有明显强调样式；
|
||||
- 在移动端（窄屏）不溢出，布局能自适应；
|
||||
- 深色主题下文字可读、对比度合理。提示：JS 会在 `<body>` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。
|
||||
|
||||
### 起步模板
|
||||
将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。
|
||||
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>小作业：欢迎卡片</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="card" id="card">
|
||||
<h1 class="card__title">欢迎来到我的页面</h1>
|
||||
<p class="card__text" id="message">请点击按钮或输入你的名字</p>
|
||||
<div class="card__actions">
|
||||
<input id="name" class="input" placeholder="输入你的名字" />
|
||||
<button id="btn" class="btn btn--primary">点我切换主题</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js" defer></script>
|
||||
<!-- 注意：JS 依赖 #message、#btn、#name 这几个 id，请不要改动它们的命名 -->
|
||||
<!-- 你可以新增或调整 class 名，或增删结构，来实现更好的视觉与布局 -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
/* 目标：只通过 CSS 实现卡片的视觉与响应式，并支持深色主题 */
|
||||
/* 建议：使用 CSS 变量管理主题；在 .theme-dark 上覆盖变量 */
|
||||
|
||||
:root {
|
||||
--bg: #f7f9fc;
|
||||
--text: #222;
|
||||
--primary: #ff7a45; /* 可调整为你的品牌色 */
|
||||
--card-bg: #fff;
|
||||
--card-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: min(640px, 100%);
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card__title {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 12px rgba(255, 122, 69, .3);
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 16px rgba(255, 122, 69, .4);
|
||||
}
|
||||
|
||||
.btn--primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 8px rgba(255, 122, 69, .3);
|
||||
}
|
||||
|
||||
/* 任务：为深色主题定义样式。JS 会在 <body> 上切换 `.theme-dark` 类。*/
|
||||
body.theme-dark {
|
||||
--bg: #0f172a;
|
||||
--text: #e5e7eb;
|
||||
--primary: #60a5fa; /* 深色下可更柔和 */
|
||||
--card-bg: #1f2937;
|
||||
--card-shadow: none;
|
||||
}
|
||||
|
||||
/* 可选：为移动端优化 */
|
||||
@media (max-width: 480px) {
|
||||
.card { padding: 18px; }
|
||||
.input { min-width: 100%; }
|
||||
}
|
||||
```
|
||||
@tab script.js
|
||||
```js
|
||||
// JS 已提供：负责交互逻辑，切换主题与显示欢迎语
|
||||
// 你只需要改 HTML 和 CSS 即可达成作业要求
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const msg = document.getElementById('message');
|
||||
const btn = document.getElementById('btn');
|
||||
const nameInput = document.getElementById('name');
|
||||
|
||||
// 切换深色主题（在 <body> 上切换 theme-dark 类）
|
||||
btn.addEventListener('click', () => {
|
||||
document.body.classList.toggle('theme-dark');
|
||||
const dark = document.body.classList.contains('theme-dark');
|
||||
msg.textContent = dark ? '深色主题已开启' : '浅色主题已开启';
|
||||
});
|
||||
|
||||
// 实时欢迎语
|
||||
nameInput.addEventListener('input', (e) => {
|
||||
const name = e.target.value.trim();
|
||||
msg.textContent = name ? `你好，${name}！` : '请点击按钮或输入你的名字';
|
||||
});
|
||||
});
|
||||
```
|
||||
:::
|
||||
|
||||
### 提示与加分项
|
||||
- 可以用 `:root`+CSS 变量统一管理主题色，在 `.theme-dark` 中覆盖变量即可完成切换；
|
||||
- 尝试为按钮增加平滑过渡与阴影层次感；
|
||||
- 在移动端下让输入框占满一行，按钮在下一行显示；
|
||||
- 可自行优化字体、字号与间距，让视觉更加舒适；
|
||||
- 加分：实现卡片在深色主题下的微动效（例如背景色淡入）。
|
||||
|
||||
## 入门版（更简单，建议先做这个）
|
||||
|
||||
目标：做一个“欢迎卡片”，内容包括标题、说明文字、一个输入框和一个按钮。
|
||||
- 点击按钮时高亮卡片（JS 已完成，你只需让 `.card.highlight` 在 CSS 里更显眼）。
|
||||
- 输入名字时实时显示欢迎语（JS 已完成）。
|
||||
- 你只需要修改 HTML 和 CSS，让页面好看、布局合理即可。
|
||||
|
||||
验收标准（入门）
|
||||
- 卡片居中、圆角、阴影、内边距，整体观感舒适。
|
||||
- 按钮有 `hover/active` 反馈，输入框 `focus` 有强调样式。
|
||||
- 窄屏下不溢出，内容能自适应。
|
||||
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>入门版小作业</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- 保留以下 id：message / btn / name / card -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="card" id="card">
|
||||
<h1>欢迎</h1>
|
||||
<p id="message">在输入框里写下你的名字</p>
|
||||
<input id="name" placeholder="输入你的名字">
|
||||
<button id="btn">高亮卡片</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<!-- 用 VSCode Live Server 打开 index.html 预览效果 -->
|
||||
<!-- 完成作业时，请只修改 HTML 和 CSS -->
|
||||
<!-- 你可以自由调整颜色、间距、字体与布局，使页面更美观 -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
/* 极简样式：你可以在此基础上美化与调整 */
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f5f7fa;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: min(360px, 100%);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 0 0 2px rgba(22,119,255,.2);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover { filter: brightness(1.05); }
|
||||
button:active { filter: brightness(0.95); }
|
||||
|
||||
/* JS 点击按钮时会在卡片上切换 .highlight 类 */
|
||||
.card.highlight {
|
||||
background: #fffbe6; /* 浅黄色高亮 */
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.10);
|
||||
}
|
||||
```
|
||||
@tab script.js
|
||||
```js
|
||||
// JS 已提供：负责简单交互。请只改 HTML/CSS。
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const msg = document.getElementById('message');
|
||||
const btn = document.getElementById('btn');
|
||||
const nameInput = document.getElementById('name');
|
||||
const card = document.getElementById('card');
|
||||
|
||||
// 实时欢迎语
|
||||
nameInput.addEventListener('input', (e) => {
|
||||
const name = e.target.value.trim();
|
||||
msg.textContent = name ? `你好，${name}！` : '在输入框里写下你的名字';
|
||||
});
|
||||
|
||||
// 切换卡片高亮
|
||||
btn.addEventListener('click', () => {
|
||||
card.classList.toggle('highlight');
|
||||
});
|
||||
});
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
Reference in New Issue
Block a user