张宗平
a6743fcea0
此前一版「讲」部分基本只是代码演示（贴代码 + 一句出处说明），没有讲透 知识点本身的原理。改为覆盖清单原则：每个知识点在大纲里至少固定两项—— 核心概念（是什么/为什么，不只是怎么写）+ 常见的坑（注意事项/误区）， 课堂实际讲解深度按学员反馈现场调整，但大纲必须列全，以免漏讲或退化成 纯代码演示。 - custom.css 新增 .concept-box/.pitfall-box 卡片样式 - day1–5.html 每个知识点前插入对应卡片，内容与 OUTLINE.md 的覆盖清单一一对应
114 lines
3.0 KiB
CSS
114 lines
3.0 KiB
CSS
/* 共享样式：讲/练/参考标签、任务卡片、代码文件链接 —— 覆盖在 reveal white 主题之上 */
|
|
|
|
.reveal { font-size: 32px; }
|
|
.reveal h1 { font-size: 1.6em; }
|
|
.reveal h2 { font-size: 1.15em; }
|
|
.reveal h3 { font-size: 0.9em; }
|
|
.reveal section img { border: none; box-shadow: none; }
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 1px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.5em;
|
|
font-weight: 600;
|
|
vertical-align: middle;
|
|
margin-left: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.tag-lecture { background: #2b6cb0; color: #fff; } /* 讲 */
|
|
.tag-practice { background: #2f855a; color: #fff; } /* 练 */
|
|
.tag-discuss { background: #b7791f; color: #fff; } /* 议：讨论型任务，非编码 */
|
|
|
|
.task-card {
|
|
border-left: 6px solid #2f855a;
|
|
background: #f4f9f5;
|
|
padding: 14px 24px;
|
|
margin: 14px 0;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
font-size: 0.62em;
|
|
line-height: 1.35;
|
|
}
|
|
.task-card h4 { margin: 0 0 6px 0; color: #2f855a; text-transform: none; font-size: 1.05em; }
|
|
|
|
.task-card dl.task-spec { margin: 8px 0 0 0; }
|
|
.task-card dl.task-spec dt {
|
|
font-weight: 700;
|
|
color: #2f855a;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-top: 10px;
|
|
}
|
|
.task-card dl.task-spec dt:first-child { margin-top: 0; }
|
|
.task-card dl.task-spec dd { margin: 3px 0 0 0; }
|
|
|
|
.ext-ref { color: #a0522d; font-style: italic; }
|
|
|
|
/* 讨论型任务卡（Day1 模块A：无编码产出，用琥珀色区分“练”的绿色） */
|
|
.task-card.discuss-card { border-left-color: #b7791f; background: #fffaf0; }
|
|
.task-card.discuss-card h4 { color: #b7791f; }
|
|
.task-card.discuss-card dl.task-spec dt { color: #b7791f; }
|
|
|
|
.filelink, code.filelink {
|
|
font-family: 'Courier New', monospace;
|
|
background: #eef2f7;
|
|
padding: 1px 8px;
|
|
border-radius: 3px;
|
|
color: #1a4d8f;
|
|
text-decoration: none;
|
|
border: 1px solid #d3dce6;
|
|
}
|
|
.filelink:hover { background: #dbe6f5; }
|
|
|
|
.footer-note { margin-top: 30px; }
|
|
|
|
.verify-box {
|
|
border: 2px dashed #b7791f;
|
|
background: #fffaf0;
|
|
padding: 12px 20px;
|
|
border-radius: 6px;
|
|
font-size: 0.6em;
|
|
text-align: left;
|
|
}
|
|
.verify-box h4 { margin: 0 0 6px 0; color: #b7791f; }
|
|
|
|
/* 每个「讲」知识点的固定两件套：核心概念（是什么/为什么）+ 常见的坑（注意事项） */
|
|
.concept-box {
|
|
border-left: 6px solid #2b6cb0;
|
|
background: #ebf4ff;
|
|
padding: 12px 22px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
font-size: 0.58em;
|
|
line-height: 1.4;
|
|
}
|
|
.concept-box h4 { margin: 0 0 6px 0; color: #2b6cb0; }
|
|
.concept-box ul { margin: 4px 0 0 20px; padding: 0; }
|
|
.concept-box li { margin: 3px 0; }
|
|
|
|
.pitfall-box {
|
|
border-left: 6px solid #c53030;
|
|
background: #fff5f5;
|
|
padding: 12px 22px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
font-size: 0.58em;
|
|
line-height: 1.4;
|
|
}
|
|
.pitfall-box h4 { margin: 0 0 6px 0; color: #c53030; }
|
|
.pitfall-box ul { margin: 4px 0 0 20px; padding: 0; }
|
|
.pitfall-box li { margin: 3px 0; }
|
|
|
|
.reveal pre code { font-size: 0.68em; max-height: 480px; }
|
|
|
|
.module-badge {
|
|
font-size: 0.4em;
|
|
color: #a0aec0;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|