Exams/FS-exams
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ZF Sun
2025-11-20 11:03:10 +08:00
commit 0a5cc64d0e
14 changed files with 884 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css3/01-responsive-dashboards/RADEME.md Normal file
View File

@@ -0,0 +1,11 @@
# Responsive Dashboards
综合布局挑战：响应式仪表盘
题目要求：
创建一个企业级数据仪表盘，要求：
1. 使用Grid+Flex混合布局
2. 实现深色/浅色主题切换
3. 添加微交互动画效果
4. 完全响应式设计
5. 使用CSS变量和计算函数

408
css3/01-responsive-dashboards/index.html Normal file
View File

@@ -0,0 +1,408 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高级CSS挑战 - 数据仪表盘</title>
<style>
/* 在这里实现您的解决方案 */
:root {
--primary-color: #2563eb;
--secondary-color: #64748b;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
--bg-primary: #1e293b;
--bg-secondary: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--border-color: #475569;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", system-ui, sans-serif;
background: linear-gradient(
135deg,
var(--bg-secondary) 0%,
var(--bg-primary) 100%
);
min-height: 100vh;
color: var(--text-primary);
transition: var(--transition);
}
.dashboard {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 80px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
min-height: 100vh;
gap: 0;
}
/* 挑战1：实现侧边栏导航 */
.sidebar {
grid-area: sidebar;
background: var(--bg-primary);
border-right: 1px solid var(--border-color);
padding: 2rem 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
/* 挑战2：实现顶部导航栏 */
.header {
grid-area: header;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow);
transition: var(--transition);
}
/* 挑战3：实现主内容区网格布局 */
.main {
grid-area: main;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
align-content: start;
}
/* 挑战4：实现数据卡片组件 */
.card {
background: var(--bg-primary);
border-radius: 16px;
padding: 1.5rem;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
var(--primary-color),
var(--success-color)
);
opacity: 0;
transition: var(--transition);
}
.card:hover::before {
opacity: 1;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
/* 挑战5：实现统计图表占位 */
.chart-container {
height: 200px;
background: linear-gradient(
45deg,
var(--bg-secondary) 25%,
transparent 25%,
transparent 75%,
var(--bg-secondary) 75%
)
0 0/20px 20px;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.chart-container::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* 挑战6：实现主题切换按钮 */
.theme-toggle {
width: 48px;
height: 24px;
background: var(--bg-secondary);
border-radius: 12px;
padding: 2px;
cursor: pointer;
position: relative;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.theme-toggle::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
transition: var(--transition);
left: 2px;
}
[data-theme="dark"] .theme-toggle::before {
left: calc(100% - 22px);
}
/* 挑战7：实现响应式设计 */
@media (max-width: 1024px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main";
}
.sidebar {
position: fixed;
left: -100%;
top: 80px;
bottom: 0;
z-index: 1000;
transition: left 0.3s ease;
}
.sidebar.active {
left: 0;
}
}
@media (max-width: 768px) {
.main {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.card {
padding: 1rem;
}
}
/* 挑战8：实现加载动画 */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 挑战9：实现表格样式 */
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-primary);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
}
.data-table th,
.data-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.data-table th {
background: var(--bg-secondary);
font-weight: 600;
position: sticky;
top: 0;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background: var(--bg-secondary);
}
/* 挑战10：实现自定义滚动条 */
.scroll-container {
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--bg-secondary);
}
.scroll-container::-webkit-scrollbar {
width: 6px;
}
.scroll-container::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
.scroll-container::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: var(--secondary-color);
}
</style>
</head>
<body>
<div class="dashboard">
<aside class="sidebar">
<div class="logo">📊 Dashboard</div>
<nav class="nav">
<a href="#" class="nav-item active">🏠 概览</a>
<a href="#" class="nav-item">📈 分析</a>
<a href="#" class="nav-item">👥 用户</a>
<a href="#" class="nav-item">⚙️ 设置</a>
</nav>
</aside>
<header class="header">
<h1>数据仪表盘</h1>
<div class="header-actions">
<button
class="theme-toggle"
onclick="toggleTheme()"
></button>
</div>
</header>
<main class="main">
<div class="card">
<h3>用户总数</h3>
<div class="stat">12,458</div>
<div class="chart-container"></div>
</div>
<div class="card">
<h3>收入</h3>
<div class="stat">¥245,789</div>
<div class="chart-container"></div>
</div>
<div class="card">
<h3>转化率</h3>
<div class="stat">24.5%</div>
<div class="chart-container"></div>
</div>
<div class="card" style="grid-column: span 2">
<h3>最近活动</h3>
<div
class="scroll-container"
style="max-height: 300px; overflow-y: auto"
>
<table class="data-table">
<thead>
<tr>
<th>用户</th>
<th>操作</th>
<th>时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>购买产品</td>
<td>2分钟前</td>
<td>成功</td>
</tr>
<tr>
<td>李四</td>
<td>提交表单</td>
<td>5分钟前</td>
<td>待处理</td>
</tr>
<tr>
<td>王五</td>
<td>注册账号</td>
<td>10分钟前</td>
<td>成功</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script>
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
body.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
}
// 初始化主题
const savedTheme = localStorage.getItem("theme") || "light";
document.body.setAttribute("data-theme", savedTheme);
</script>
</body>
</html>

11
css3/02-interactive-card-collection/RADEME.md Normal file
View File

@@ -0,0 +1,11 @@
# Interactive Card Collection
高级动画挑战：交互式卡片集合
题目要求：
创建一组交互式卡片，要求：
1. 使用CSS Grid实现瀑布流布局
2. 实现3D翻转动画效果
3. 添加鼠标悬停放大和阴影效果
4. 使用clip-path创建不规则形状
5. 实现平滑的过渡动画

106
css3/02-interactive-card-collection/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高级CSS挑战 - 交互式卡片</title>
<style>
.card-collection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
perspective: 1000px;
}
.card {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
transparent 40%,
rgba(255, 255, 255, 0.3) 50%,
transparent 60%
);
animation: shine 3s infinite;
pointer-events: none;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(200%) rotate(45deg);
}
}
.card:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.card:nth-child(odd) {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.card:nth-child(even) {
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}
.card-content {
transform: translateZ(50px);
}
.card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<div class="card-collection">
<div class="card">
<div class="card-content">
<h3>创意设计</h3>
<p>探索无限的设计可能性</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h3>用户体验</h3>
<p>打造卓越的用户体验</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h3>前端开发</h3>
<p>构建现代化的Web应用</p>
</div>
</div>
</div>
</body>
</html>

10
css3/03-multi-level_navigation_menu/RADEME.md Normal file
View File

@@ -0,0 +1,10 @@
# Multi-Level Navigation Menu
复杂布局挑战：多级导航菜单
题目要求：
1. 实现一个多级导航菜单，要求：
2. 使用纯CSS实现下拉菜单
3. 添加平滑的展开/收起动画
4. 实现悬停和焦点状态
5. 支持键盘导航
6. 响应式设计

89
css3/03-multi-level_navigation_menu/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高级CSS挑战 - 多级导航菜单</title>
<style>
.nav-menu {
display: flex;
gap: 2rem;
background: #2c3e50;
padding: 1rem 2rem;
}
.nav-item {
position: relative;
list-style: none;
}
.nav-link {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: all 0.3s ease;
}
.nav-link:hover,
.nav-link:focus {
background: #34495e;
}
.sub-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
min-width: 200px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.nav-item:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-menu .nav-link {
color: #2c3e50;
display: block;
padding: 0.75rem 1rem;
}
.sub-menu .nav-link:hover {
background: #ecf0f1;
}
</style>
</head>
<body>
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">产品</a>
<ul class="sub-menu">
<li><a href="#" class="nav-link">Web应用</a></li>
<li><a href="#" class="nav-link">移动应用</a></li>
<li><a href="#" class="nav-link">桌面应用</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">服务</a>
<ul class="sub-menu">
<li><a href="#" class="nav-link">设计</a></li>
<li><a href="#" class="nav-link">开发</a></li>
<li><a href="#" class="nav-link">运维</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

11
css3/04-complex-form-styles/RADEME.md Normal file
View File

@@ -0,0 +1,11 @@
# Complex Form Styles
高级选择器挑战：复杂表单样式
题目要求：
1. 样式化一个复杂表单，要求：
2. 使用属性选择器和伪类
3. 实现表单验证样式
4. 添加自定义复选框和单选框
5. 实现焦点和悬停状态
6. 使用CSS变量主题化

105
css3/04-complex-form-styles/index.html Normal file
View File

@@ -0,0 +1,105 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高级CSS挑战 - 复杂表单</title>
<style>
:root {
--primary: #3498db;
--danger: #e74c3c;
--success: #2ecc71;
--border: #bdc3c7;
}
.form-group {
margin-bottom: 1rem;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border);
border-radius: 6px;
transition: all 0.3s ease;
}
input:focus,
select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
input:invalid {
border-color: var(--danger);
}
input:valid {
border-color: var(--success);
}
/* 自定义复选框 */
.checkbox {
position: relative;
padding-left: 2rem;
}
.checkbox input {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid var(--border);
border-radius: 4px;
}
.checkbox input:checked ~ .checkmark {
background: var(--primary);
border-color: var(--primary);
}
.checkmark::after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox input:checked ~ .checkmark::after {
display: block;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<input type="text" placeholder="姓名" required />
</div>
<div class="form-group">
<input type="email" placeholder="邮箱" required />
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox" required />
<span class="checkmark"></span>
同意条款
</label>
</div>
</form>
</body>
</html>

10
css3/05-efficient-css-writing/RADEME.md Normal file
View File

@@ -0,0 +1,10 @@
# Efficient CSS Writing
性能优化挑战：高效CSS编写
题目要求：
1. 优化以下CSS代码，要求：
2. 减少选择器复杂度
3. 使用继承和层叠
4. 避免重复代码
5. 使用合适的单位
6. 优化动画性能

37
css3/05-efficient-css-writing/demo.css Normal file
View File

@@ -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; /* 优化动画性能 */
}

9
css3/06-pure-css-drawing-icons/RADEME.md Normal file
View File

@@ -0,0 +1,9 @@
# Pure CSS drawing icons
创意挑战：纯CSS绘制图标
题目要求：
1. 使用纯CSS绘制以下图标：
2. 使用单个div元素
3. 使用伪元素和box-shadow
4. 添加悬停动画效果
5. 支持不同尺寸

50
css3/06-pure-css-drawing-icons/index.html Normal file
View File

@@ -0,0 +1,50 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>高级CSS挑战 - 纯CSS图标</title>
<style>
.icon {
width: 40px;
height: 40px;
position: relative;
background: #3498db;
border-radius: 50%;
transition: all 0.3s ease;
}
.icon::before,
.icon::after {
content: "";
position: absolute;
background: white;
transition: all 0.3s ease;
}
.icon::before {
width: 20px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon::after {
width: 2px;
height: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon:hover {
transform: rotate(45deg);
background: #2980b9;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>

9
css3/07-adaptive-grid-system/README.md Normal file
View File

@@ -0,0 +1,9 @@
# Adaptive Grid System Challenge
响应式设计挑战：自适应网格系统
题目要求：
1. 创建一个自适应网格系统，要求：
2. 使用CSS Grid和Flexbox
3. 支持多种屏幕尺寸
4. 使用媒体查询和容器查询
5. 实现流体排版

18
css3/07-adaptive-grid-system/app.css Normal file
View File

@@ -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;
}
}