实践案例
案例一：响应式卡片布局
使用 CSS Grid 实现自适应的卡片网格布局，支持不同屏幕尺寸。
响应式卡片网格
难度：初级实现步骤
-
创建 HTML 结构
使用 div 容器包裹多个卡片元素
-
设置 Grid 容器
使用 display: grid 和 grid-template-columns
-
实现响应式
使用 repeat(auto-fit, minmax()) 实现自适应
-
添加卡片样式
设置阴影、圆角、悬停效果
完整代码
<!-- HTML 结构 -->
<div class="card-grid">
<div class="card">卡片 1</div>
<div class="card">卡片 2</div>
<div class="card">卡片 3</div>
</div>
/* CSS 样式 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.card {
background: white;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
关键知识点
1. auto-fit 自动填充可用空间
2. minmax(300px, 1fr) 设置最小 300px，最大占满剩余空间
3. gap 设置网格间距，无需使用 margin
4. transition 添加平滑的悬停动画
案例二：响应式导航菜单
实现桌面端水平导航、移动端汉堡菜单的响应式导航栏。
响应式导航菜单
难度：中级实现步骤
-
创建导航 HTML
nav 容器 + logo + 菜单列表 + 汉堡按钮
-
桌面端样式
Flexbox 水平排列，隐藏汉堡按钮
-
移动端样式
媒体查询切换为垂直排列，显示汉堡按钮
-
JavaScript 交互
点击汉堡按钮切换菜单显示状态
完整代码
<!-- HTML 结构 -->
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
<button class="hamburger">☰</button>
</nav>
/* CSS 样式 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
}
.hamburger {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* 移动端样式 */
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: #333;
padding: 1rem;
}
.nav-links.active {
display: flex;
}
}
// JavaScript 交互
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
关键知识点
1. 使用媒体查询切换布局模式
2. 移动端使用绝对定位展开菜单
3. JavaScript 切换 active 类控制显示
4. 桌面端隐藏汉堡按钮，移动端显示
案例三：登录页面
使用 Flexbox 实现居中的登录表单，包含表单验证和交互效果。
登录页面设计
难度：中级实现步骤
-
创建表单结构
form 容器 + 输入框 + 按钮
-
居中布局
使用 Flexbox 实现垂直水平居中
-
表单样式
输入框焦点效果、按钮悬停效果
-
表单验证
HTML5 验证 + CSS 状态样式
完整代码
<!-- HTML 结构 -->
<div class="login-container">
<form class="login-form">
<h2>登录</h2>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
/* CSS 样式 */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
}
.login-form {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #333;
}
.form-group input {
width: 100%;
padding: 0.8rem;
border: 2px solid #e2e8f0;
border-radius: 4px;
transition: border-color 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
button[type="submit"] {
width: 100%;
padding: 0.8rem;
background: #667eea;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
button[type="submit"]:hover {
background: #764ba2;
}
关键知识点
1. Flexbox 居中布局：justify-content + align-items
2. max-width 限制表单最大宽度
3. required 属性启用 HTML5 验证
4. :focus 伪类实现输入框焦点效果
5. transition 添加平滑过渡动画