50 lines
697 B
Markdown
50 lines
697 B
Markdown
# CSS 布局与响应式
|
|
|
|
## 学习目标
|
|
- 掌握 Flexbox 布局
|
|
- 学会 Grid 布局
|
|
- 理解响应式设计
|
|
|
|
## Flexbox 布局
|
|
|
|
```css
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
```
|
|
|
|
## Grid 布局
|
|
|
|
```css
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
```
|
|
|
|
## 响应式设计
|
|
|
|
```css
|
|
/* 移动端优先 */
|
|
.box { width: 100%; }
|
|
|
|
/* 平板 */
|
|
@media (min-width: 768px) {
|
|
.box { width: 50%; }
|
|
}
|
|
|
|
/* 桌面 */
|
|
@media (min-width: 1024px) {
|
|
.box { width: 33.33%; }
|
|
}
|
|
```
|
|
|
|
## 动手练习
|
|
|
|
1. 使用 Flexbox 实现导航栏
|
|
2. 使用 Grid 实现图片画廊
|
|
3. 制作响应式登录页面
|