commit 0a5cc64d0ef109ea1dbf1a4e8f32904baa0ece43 Author: ZF sun <34314687@qq.com> Date: Thu Nov 20 11:03:10 2025 +0800 init diff --git a/css3/01-responsive-dashboards/RADEME.md b/css3/01-responsive-dashboards/RADEME.md new file mode 100644 index 0000000..a7dc03d --- /dev/null +++ b/css3/01-responsive-dashboards/RADEME.md @@ -0,0 +1,11 @@ +# Responsive Dashboards + +综合布局挑战：响应式仪表盘 + +题目要求： +创建一个企业级数据仪表盘，要求： +1. 使用Grid+Flex混合布局 +2. 实现深色/浅色主题切换 +3. 添加微交互动画效果 +4. 完全响应式设计 +5. 使用CSS变量和计算函数 diff --git a/css3/01-responsive-dashboards/index.html b/css3/01-responsive-dashboards/index.html new file mode 100644 index 0000000..3ba2cf5 --- /dev/null +++ b/css3/01-responsive-dashboards/index.html @@ -0,0 +1,408 @@ + + + + + + 高级CSS挑战 - 数据仪表盘 + + + +
+ + +
+

数据仪表盘

+
+ +
+
+ +
+
+

用户总数

+
12,458
+
+
+ +
+

收入

+
¥245,789
+
+
+ +
+

转化率

+
24.5%
+
+
+ +
+

最近活动

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户操作时间状态
张三购买产品2分钟前成功
李四提交表单5分钟前待处理
王五注册账号10分钟前成功
+
+
+
+
+ + + + diff --git a/css3/02-interactive-card-collection/RADEME.md b/css3/02-interactive-card-collection/RADEME.md new file mode 100644 index 0000000..3d0fc5f --- /dev/null +++ b/css3/02-interactive-card-collection/RADEME.md @@ -0,0 +1,11 @@ +# Interactive Card Collection + +高级动画挑战：交互式卡片集合 + +题目要求： +创建一组交互式卡片，要求： +1. 使用CSS Grid实现瀑布流布局 +2. 实现3D翻转动画效果 +3. 添加鼠标悬停放大和阴影效果 +4. 使用clip-path创建不规则形状 +5. 实现平滑的过渡动画 diff --git a/css3/02-interactive-card-collection/index.html b/css3/02-interactive-card-collection/index.html new file mode 100644 index 0000000..d0ae38b --- /dev/null +++ b/css3/02-interactive-card-collection/index.html @@ -0,0 +1,106 @@ + + + + + + 高级CSS挑战 - 交互式卡片 + + + +
+
+
+

创意设计

+

探索无限的设计可能性

+
+
+
+
+

用户体验

+

打造卓越的用户体验

+
+
+
+
+

前端开发

+

构建现代化的Web应用

+
+
+
+ + diff --git a/css3/03-multi-level_navigation_menu/RADEME.md b/css3/03-multi-level_navigation_menu/RADEME.md new file mode 100644 index 0000000..cb9bd5d --- /dev/null +++ b/css3/03-multi-level_navigation_menu/RADEME.md @@ -0,0 +1,10 @@ +# Multi-Level Navigation Menu + +复杂布局挑战：多级导航菜单 +题目要求： +1. 实现一个多级导航菜单，要求： +2. 使用纯CSS实现下拉菜单 +3. 添加平滑的展开/收起动画 +4. 实现悬停和焦点状态 +5. 支持键盘导航 +6. 响应式设计 diff --git a/css3/03-multi-level_navigation_menu/index.html b/css3/03-multi-level_navigation_menu/index.html new file mode 100644 index 0000000..4c48822 --- /dev/null +++ b/css3/03-multi-level_navigation_menu/index.html @@ -0,0 +1,89 @@ + + + + + + 高级CSS挑战 - 多级导航菜单 + + + + + + diff --git a/css3/04-complex-form-styles/RADEME.md b/css3/04-complex-form-styles/RADEME.md new file mode 100644 index 0000000..4d9061e --- /dev/null +++ b/css3/04-complex-form-styles/RADEME.md @@ -0,0 +1,11 @@ +# Complex Form Styles + +高级选择器挑战：复杂表单样式 + +题目要求： +1. 样式化一个复杂表单，要求： +2. 使用属性选择器和伪类 +3. 实现表单验证样式 +4. 添加自定义复选框和单选框 +5. 实现焦点和悬停状态 +6. 使用CSS变量主题化 diff --git a/css3/04-complex-form-styles/index.html b/css3/04-complex-form-styles/index.html new file mode 100644 index 0000000..ad305da --- /dev/null +++ b/css3/04-complex-form-styles/index.html @@ -0,0 +1,105 @@ + + + + + + 高级CSS挑战 - 复杂表单 + + + +
+
+ +
+
+ +
+
+ +
+
+ + diff --git a/css3/05-efficient-css-writing/RADEME.md b/css3/05-efficient-css-writing/RADEME.md new file mode 100644 index 0000000..c7cacd0 --- /dev/null +++ b/css3/05-efficient-css-writing/RADEME.md @@ -0,0 +1,10 @@ +# Efficient CSS Writing + +性能优化挑战：高效CSS编写 +题目要求： +1. 优化以下CSS代码，要求： +2. 减少选择器复杂度 +3. 使用继承和层叠 +4. 避免重复代码 +5. 使用合适的单位 +6. 优化动画性能 diff --git a/css3/05-efficient-css-writing/demo.css b/css3/05-efficient-css-writing/demo.css new file mode 100644 index 0000000..fd88ba8 --- /dev/null +++ b/css3/05-efficient-css-writing/demo.css @@ -0,0 +1,37 @@ +/* 优化前的代码 */ +.container .item .title { + font-size: 16px; + color: #333; +} + +.container .item .content { + font-size: 14px; + color: #666; +} + +.container .item .button { + padding: 10px 20px; + background: blue; + color: white; +} + +/* 优化后的代码 */ +.container { + font-size: 16px; + color: #333; +} + +.item { + font-size: 0.875em; /* 14px / 16px */ +} + +.item .content { + color: #666; +} + +.button { + padding: 0.625em 1.25em; /* 10px 20px / 16px */ + background: blue; + color: white; + will-change: transform; /* 优化动画性能 */ +} diff --git a/css3/06-pure-css-drawing-icons/RADEME.md b/css3/06-pure-css-drawing-icons/RADEME.md new file mode 100644 index 0000000..1f224c3 --- /dev/null +++ b/css3/06-pure-css-drawing-icons/RADEME.md @@ -0,0 +1,9 @@ +# Pure CSS drawing icons + +创意挑战：纯CSS绘制图标 +题目要求： +1. 使用纯CSS绘制以下图标： +2. 使用单个div元素 +3. 使用伪元素和box-shadow +4. 添加悬停动画效果 +5. 支持不同尺寸 diff --git a/css3/06-pure-css-drawing-icons/index.html b/css3/06-pure-css-drawing-icons/index.html new file mode 100644 index 0000000..d8f0135 --- /dev/null +++ b/css3/06-pure-css-drawing-icons/index.html @@ -0,0 +1,50 @@ + + + + + + 高级CSS挑战 - 纯CSS图标 + + + +
+ + diff --git a/css3/07-adaptive-grid-system/README.md b/css3/07-adaptive-grid-system/README.md new file mode 100644 index 0000000..f3ab545 --- /dev/null +++ b/css3/07-adaptive-grid-system/README.md @@ -0,0 +1,9 @@ +# Adaptive Grid System Challenge + +响应式设计挑战：自适应网格系统 +题目要求： +1. 创建一个自适应网格系统，要求： +2. 使用CSS Grid和Flexbox +3. 支持多种屏幕尺寸 +4. 使用媒体查询和容器查询 +5. 实现流体排版 diff --git a/css3/07-adaptive-grid-system/app.css b/css3/07-adaptive-grid-system/app.css new file mode 100644 index 0000000..76c57ce --- /dev/null +++ b/css3/07-adaptive-grid-system/app.css @@ -0,0 +1,18 @@ +.grid-system { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); + gap: clamp(1rem, 2vw, 2rem); + container-type: inline-size; +} + +@container (min-width: 600px) { + .grid-item { + font-size: clamp(1rem, 1.5vw, 1.5rem); + } +} + +@media (max-width: 768px) { + .grid-system { + grid-template-columns: 1fr; + } +}