sync from local backup

2026-08-05 23:59:15 +08:00
commit d48ec1747c
358 changed files with 34384 additions and 0 deletions
@@ -0,0 +1,49 @@
+# 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. 制作响应式登录页面