一、为什么这 3 天是 "从静态到动态" 的关键跃迁？
职场前端开发中，"只会写静态页面" 远远不够 ------ 产品经理常要求 "hover 时按钮变色""点击显示弹窗""表单输入验证" 等交互效果，而设计师则希望 "样式统一、视觉一致"。这 3 天我们聚焦 2 个核心职场需求：
- CSS 样式复用与维护（避免写重复代码，对接团队协作）；
- 基础 JS 交互（实现 "用户操作→页面响应"，告别纯静态）。
很多新手卡在 "样式混乱""交互不会写"，核心是没掌握 "CSS 模块化" 和 "JS 事件驱动" 的底层逻辑 ------ 这正是从 "入门" 到 "能干活" 的核心门槛。
二、Day4：CSS 进阶 ------ 样式复用（职场 "模块化" 思维落地）
1. 职场痛点：为什么不能 "写一次样式用一次"？
新手写 CSS 常犯的错误：每个元素单独写样式，重复代码多、修改麻烦。比如：
css
/* 错误示范：重复样式冗余，维护成本高 */
.btn-login {
width: 120px;
height: 40px;
background-color: #42b983;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-register {
width: 120px;
height: 40px;
background-color: #fff;
color: #42b983;
border: 1px solid #42b983;
border-radius: 4px;
cursor: pointer;
}职场问题：如果需要修改按钮圆角（比如从 4px 改成 8px），要改所有按钮样式；团队协作时，每个人写的样式不统一，导致页面视觉混乱。
2. 核心知识点：CSS 模块化的 2 种职场用法（附对比表）
| 用法 | 核心逻辑 | 代码示例 | 职场适用场景 |
|---|---|---|---|
| 公共类（基础类） | 提取重复样式，复用调用 | .btn { width: 120px; height: 40px; border-radius: 4px; cursor: pointer; } |
按钮、卡片、表单等通用组件 |
| 差异化类 | 基于基础类，修改个性样式 | .btn-primary { background: #42b983; color: #fff; border: none; } |
不同状态 / 类型的同一组件（登录 / 注册按钮） |
3. 实战：封装 "通用按钮组件"（对接职场 "样式统一" 需求）
css
/* 1. 基础类：提取所有按钮的公共样式 */
.btn {
display: inline-block; /* 支持padding和width */
padding: 0 20px;
height: 40px;
line-height: 40px; /* 垂直居中（文字单行时用） */
border-radius: 8px; /* 职场常用圆角 */
cursor: pointer; /* 鼠标悬浮变指针，提示可点击 */
text-align: center;
text-decoration: none; /* 清除a标签下划线 */
font-size: 14px; /* 职场常用字体大小 */
transition: all 0.3s; /* 过渡动画：交互更丝滑 */
}
/* 2. 差异化类：不同类型按钮 */
.btn-primary {
background-color: #42b983; /* 主色：成功/确认 */
color: #fff;
border: none;
}
.btn-secondary {
background-color: #fff; /* 次色：取消/返回 */
color: #42b983;
border: 1px solid #42b983;
}
.btn-danger {
background-color: #ff4d4f; /* 警示色：删除/危险操作 */
color: #fff;
border: none;
}
/* 3. 交互状态：hover/active（职场必加） */
.btn:hover {
opacity: 0.9; /* 悬浮时轻微变暗，提升交互感 */
transform: translateY(-2px); /* 轻微上浮，视觉优化 */
}
.btn:active {
transform: translateY(0); /* 点击时回归原位 */
}html
预览
<!-- 调用方式：基础类+差异化类，复用性极强 -->
<button class="btn btn-primary">登录</button>
<button class="btn btn-secondary">注册</button>
<button class="btn btn-danger">删除</button>
<a href="/back" class="btn btn-secondary">返回</a>职场验收标准：
- 所有按钮样式统一，修改基础类（如圆角、高度）可全局生效；
- 交互状态（hover/active）有反馈，符合用户操作习惯；
- 支持
<button>和<a>标签复用，适配不同场景。
三、Day5-6：JS 基础 ------ 事件驱动与 DOM 操作（实现 "用户交互" 核心）
1. 职场认知：JS 的核心作用是什么？
HTML 是 "页面结构"，CSS 是 "页面样式"，而 JS 是 "页面行为"------ 职场中 80% 的基础交互都依赖 "用户操作→JS 响应→DOM 变化" 的逻辑链。比如：
- 点击按钮显示 / 隐藏弹窗；
- 输入框实时验证内容格式；
- 点击导航切换页面内容。
2. 核心知识点：3 个 "职场高频" JS 基础（拒绝死记硬背）
| 知识点 | 核心作用 | 代码示例 | 职场使用场景 |
|---|---|---|---|
| DOM 选择器 | 找到页面元素 | document.querySelector('.btn') |
操作指定按钮、输入框等 |
| 事件绑定 | 监听用户操作 | btn.addEventListener('click', 函数) |
点击、输入、悬浮等交互 |
| DOM 修改 | 改变页面内容 / 样式 | element.style.display = 'none' |
显示 / 隐藏元素、修改样式、更新文本 |
3. 实战：实现 "登录弹窗交互"（对接职场 "弹窗组件" 高频需求）
需求拆解（职场真实需求）：
- 点击 "登录" 按钮，显示弹窗；
- 点击 "关闭" 按钮或弹窗外部，隐藏弹窗；
- 输入框实时验证：用户名不能为空，密码长度≥6 位。
html
预览
<!-- 弹窗结构 -->
<div class="modal" id="loginModal">
<div class="modal-content">
<span class="close-btn" id="closeBtn">×</span>
<h3>用户登录</h3>
<form id="loginForm">
<div class="form-item">
<label>用户名：</label>
<input type="text" id="username" placeholder="请输入用户名">
<span class="error-message" id="usernameError"></span>
</div>
<div class="form-item">
<label>密码：</label>
<input type="password" id="password" placeholder="请输入密码">
<span class="error-message" id="passwordError"></span>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
<!-- 触发按钮 -->
<button class="btn btn-primary" id="showLoginBtn">登录</button>css
/* 弹窗样式：默认隐藏 */
.modal {
display: none; /* 初始隐藏 */
position: fixed; /* 固定定位，覆盖整个页面 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
z-index: 999; /* 确保弹窗在最上层 */
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #fff;
padding: 30px;
border-radius: 8px;
width: 350px;
position: relative;
}
.close-btn {
position: absolute;
top: 15px;
right: 20px;
font-size: 20px;
cursor: pointer;
color: #999;
}
.close-btn:hover {
color: #333;
}
.form-item {
margin-bottom: 20px;
}
.form-item label {
display: block;
margin-bottom: 8px;
font-size: 14px;
}
.form-item input {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.error-message {
display: block;
margin-top: 5px;
font-size: 12px;
color: #ff4d4f; /* 错误提示色 */
}javascript
运行
// 1. 获取页面元素（DOM选择器）
const showLoginBtn = document.getElementById('showLoginBtn');
const loginModal = document.getElementById('loginModal');
const closeBtn = document.getElementById('closeBtn');
const loginForm = document.getElementById('loginForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
// 2. 显示弹窗（事件绑定+DOM修改）
showLoginBtn.addEventListener('click', function() {
loginModal.style.display = 'flex'; // 从none改为flex，显示弹窗
});
// 3. 隐藏弹窗（多个触发场景：关闭按钮、遮罩层）
function hideModal() {
loginModal.style.display = 'none';
loginForm.reset(); // 隐藏时重置表单
usernameError.textContent = ''; // 清空错误提示
passwordError.textContent = '';
}
closeBtn.addEventListener('click', hideModal);
// 点击遮罩层关闭弹窗
loginModal.addEventListener('click', function(e) {
// 只有点击遮罩层（modal本身）时才关闭，避免点击弹窗内容也关闭
if (e.target === loginModal) {
hideModal();
}
});
// 4. 表单验证（输入事件+提交事件）
// 用户名验证
username.addEventListener('input', function() {
if (!this.value.trim()) {
usernameError.textContent = '用户名不能为空';
} else {
usernameError.textContent = ''; // 输入合法时清空错误
}
});
// 密码验证
password.addEventListener('input', function() {
if (this.value.length < 6) {
passwordError.textContent = '密码长度不能少于6位';
} else {
passwordError.textContent = '';
}
});
// 表单提交验证
loginForm.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为（关键：避免页面刷新）
let isValide = true;
// 再次验证（防止用户直接提交空表单）
if (!username.value.trim()) {
usernameError.textContent = '用户名不能为空';
isValide = false;
}
if (password.value.length < 6) {
passwordError.textContent = '密码长度不能少于6位';
isValide = false;
}
// 验证通过：模拟登录成功
if (isValide) {
alert(`登录成功！用户名：${username.value}`);
hideModal();
}
});职场逻辑拆解：
- 元素获取：用
getElementById精准选择元素（职场优先使用 ID 选择器，效率高）； - 事件绑定：每个交互（点击、输入、提交）都对应一个事件，逻辑清晰；
- DOM 修改：通过
style.display控制显示隐藏，textContent修改文本内容； - 边界处理：阻止表单默认提交、点击弹窗内容不关闭遮罩层，这些都是职场中 "用户体验" 的关键细节。
四、3 天总结：职场能力落地清单
- 能封装 CSS 通用组件（基础类 + 差异化类），实现样式复用和统一；
- 能通过 JS 实现 "点击、输入" 等基础交互，理解 "事件驱动" 逻辑；
- 掌握 DOM 选择器、事件绑定、DOM 修改的核心用法，能独立完成弹窗、表单验证等常见需求；
- 完成作业：基于本文代码，添加 "注册弹窗"，实现 "点击注册→显示注册表单→验证手机号格式（11 位数字）→提交成功提示"，并提交到 GitHub（练习代码版本管理）。