```html
<style> /* 深色笔记核心样式 */ details.note { margin: 1em 0; border-radius: 6px; overflow: hidden; background: #2d3436; transition: all 0.3s ease; } details.note:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } details.note summary { padding: 0.8em 1em 0.8em 2.5em; /* 为图标留出空间 */ font-weight: 600; cursor: pointer; list-style: none; position: relative; } /* 标题文本样式（无链接时） */ details.note summary:not(:has(a)) { color: #f1f1f1; } /* 标题链接样式（有链接时） */ details.note summary a { color: inherit; text-decoration: none; display: block; } details.note summary a:hover { text-decoration: underline; } /* 通用展开/折叠图标 */ details.note summary::before { content: "▸"; position: absolute; left: 0.8em; transition: transform 0.2s ease; } details.note[open] summary::before { transform: rotate(90deg); } details.note summary::-webkit-details-marker { display: none; } /* 内容区域样式 */ details.note > div, details.note > p { padding: 0.8em 1em 1em 2.5em; margin: 0; color: #dfe6e9; line-height: 1.6; } /* 蓝色（默认）笔记 */ details.note { border-left: 4px solid #0984e3; } details.note summary { background: rgba(9, 132, 227, 0.15); } details.note summary::before { color: #74b9ff; } details.note summary a { color: #74b9ff; } details.note summary a:hover { color: #a29bfe; } /* 黄色笔记（新增） */ details.note.yellow { border-left-color: #fdcb6e; } details.note.yellow summary { background: rgba(253, 203, 110, 0.15); } details.note.yellow summary::before { color: #fdcb6e; } details.note.yellow summary a { color: #fdcb6e; } details.note.yellow summary a:hover { color: #ffeaa7; } /* 红色笔记（新增） */ details.note.red { border-left-color: #ff7675; } details.note.red summary { background: rgba(255, 118, 117, 0.15); } details.note.red summary::before { color: #ff7675; } details.note.red summary a { color: #ff7675; } details.note.red summary a:hover { color: #ffb8b8; } /* 绿色笔记 */ details.note.green { border-left-color: #55efc4; } details.note.green summary { background: rgba(85, 239, 196, 0.15); } details.note.green summary::before { color: #55efc4; } details.note.green summary a { color: #55efc4; } details.note.green summary a:hover { color: #8affde; } /* 题目链接样式 */ .note-problem { margin: 0.8em 0; padding: 0.8em; border-radius: 4px; background: #393e46; border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.2s ease; } .note-problem:hover { transform: translateX(4px); } .note-problem a { color: #74b9ff; font-weight: 500; text-decoration: none; } .note-problem a:hover { color: #a29bfe; text-decoration: underline; } .note-problem .problem-desc { margin: 0.5em 0 0 1.2em; color: #b2bec3; font-size: 0.95em; line-height: 1.5; } /* 分类描述 */ .category-desc { color: #b2bec3; padding: 0.5em 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); margin-bottom: 1em; } /* 代码块样式 */ details.note pre { background: #1a1a1a; color: #f8f9fa; padding: 1em; border-radius: 4px; margin: 0.8em 0 0 0; overflow-x: auto; font-family: 'Courier New', monospace; } details.note code { font-family: 'Courier New', monospace; background: rgba(255, 255, 255, 0.1); padding: 0.2em 0.4em; border-radius: 3px; } </style> <!-- 使用示例 --> <!-- 1. 带链接的蓝色笔记（默认） --> <details class="note" open> <summary><a href="https://oi-wiki.org/basic/" target="_blank">基础算法题目汇总</a></summary> <p class="category-desc">以下是基础算法领域的经典练习题，按难度递增排列：</p> <div class="note-problem"> <a href="https://www.luogu.com.cn/problem/P1001" target="_blank">洛谷 P1001 A+B Problem</a> <div class="problem-desc">入门级题目，考察基本输入输出能力。</div> </div> </details> <!-- 2. 不带链接的黄色笔记 --> <details class="note yellow"> <summary>易错点提醒</summary> <p>以下是编程中常见的错误类型：</p> <ul> <li>数组越界访问（特别是循环边界条件）</li> <li>整数溢出（需注意数据范围）</li> <li>未初始化变量的使用</li> </ul> </details> <!-- 3. 带链接的红色笔记 --> <details class="note red"> <summary><a href="https://oi-wiki.org/error/" target="_blank">常见错误分析</a></summary> <p class="category-desc">竞赛中容易失分的典型错误：</p> <div class="note-problem"> <a href="https://www.luogu.com.cn/problem/P1068" target="_blank">洛谷 P1068 分数线划定</a> <div class="problem-desc">排序边界处理错误，容易忽略同分情况。</div> </div> </details> <!-- 4. 不带链接的绿色笔记 --> <details class="note green"> <summary>优化技巧总结</summary> <p>提升程序效率的常用方法：</p> <ul> <li>使用位运算替代乘除法</li> <li>预先计算避免重复运算</li> <li>合理选择数据结构减少时间复杂度</li> </ul> </details> <!-- 5. 代码示例笔记 --> <details class="note"> <summary>解题代码示例（无链接）</summary> <p>洛谷 P1001 参考代码：</p> <pre><code>#include <iostream> using namespace std; int main() { int a, b; cin >> a >> b; cout << a + b << endl; return 0; }</code></pre> </details>
```