以下是 **5个参考 Codeforces、AtCoder 和 OI Wiki 风格的静态网页首页模板**，专为算法竞赛、信息学奥赛（OI）和编程训练平台设计。每个模板均包含完整的 HTML + CSS 代码，可直接复制运行，具备典型特征：简洁排版、代码高亮风格、题目列表、比赛日程、排行榜等。
---
### ✅ 模板 1：竞技编程平台首页（类似【Codeforces】风格）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AlgoFight - 算法对战平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', monospace;
background: #f3f3f3;
color: #333;
}
header {
background: #2c3e50;
color: white;
padding: 1rem 2rem;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: #e
cf0f1;
text-decoration: none;
}
.hero {
text-align: center;
padding: 3rem 1rem;
background: #34495e;
color: white;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
.card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
padding: 0.8rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background: #eee;
}
.tag {
display: inline-block;
background: #e74c3c;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.8rem;
}
footer {
text-align: center;
padding: 2rem;
background: #2c3e50;
color: white;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">问题集</a></li>
<li><a href="#">比赛</a></li>
<li><a href="#">排名</a></li>
<li><a href="#">讨论</a></li>
</ul>
</nav>
</header>
<!-- 主视觉区 -->
<section class="hero">
<h1>AlgoFight</h1>
<p>实时在线评测 | 编程对战 | 全球排名</p>
<a href="#" style="color:#3498db;">立即参加 Round #800 →</a>
</section>
<!-- 内容区域 -->
<div class="container">
<!-- 左侧：最新题目 -->
<main>
<div class="card">
<h2>近期比赛</h2>
<table>
<tr>
<th>名称</th>
<th>时间</th>
<th>时长</th>
<th>报名</th>
</tr>
<tr>
<td>Div. 2 Round #800</td>
<td>2025-04-05 18:00</td>
<td>2小时</td>
<td><a href="#">报名</a></td>
</tr>
<tr>
<td>Educational Round</td>
<td>2025-04-10 20:00</td>
<td>2.5小时</td>
<td><a href="#">报名</a></td>
</tr>
</table>
</div>
<div class="card">
<h2>热门题目</h2>
<ul>
<li>A. <strong>水题模拟</strong> (难度: 800) <span class="tag">贪心</span></li>
<li>B. <strong>数组翻转</strong> (难度: 1200) <span class="tag">构造</span></li>
<li>C. <strong>树上DP入门</strong> (难度: 1600) <span class="tag">动态规划</span></li>
</ul>
</div>
</main>
<!-- 右侧：排行榜 -->
<aside>
<div class="card">
<h3>全球排名 Top 5</h3>
<ol>
<li>tourist - 3800</li>
<li>Benq - 3650</li>
<li>jiangly - 3600</li>
<li>Um_nik - 3550</li>
<li>maroonrk - 3500</li>
</ol>
</div>
<div class="card">
<h3>状态</h3>
<p>在线用户：1,243人</p>
<p>今日提交：9,876次</p>
</div>
</aside>
</div>
<!-- 底部 -->
<footer>
© 2025 AlgoFight | 类似 Codeforces 的算法竞赛平台 | 学习用途
</footer>
</body>
</html>
```
---
### ✅ 模板 2：日本式编程竞赛平台（类似【AtCoder】风格）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>JapanCoder - 日式算法竞赛</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #fff;
color: #333;
}
header {
background: #00a2ed;
color: white;
padding: 1rem 2rem;
text-align: center;
}
.logo {
font-size: 2rem;
font-weight: bold;
}
.contest-types {
display: flex;
justify-content: center;
gap: 1rem;
margin: 1rem 0;
}
.btn {
background: white;
color: #00a2ed;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container {
max-width: 1000px;
margin: 2rem auto;
padding: 0 1rem;
}
.round {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
}
.info {
font-size: 0.9rem;
color: #666;
}
footer {
text-align: center;
padding: 2rem;
background: #eee;
color: #666;
}
</style>
</head>
<body>
<header>
<div class="logo">JapanCoder</div>
<div class="contest-types">
<button class="btn">ABC</button>
<button class="btn">ARC</button>
<button class="btn">AGC</button>
</div>
</header>
<div class="container">
<h2>即将举行的比赛</h2>
<div class="round">
<h3>AtCoder Beginner Contest 350 (ABC 350)</h3>
<p class="info">时间：2025年4月6日 星期六 20:00 - 21:40（UTC+8）</p>
<p class="info">等级要求：未评级 ~ 1999</p>
<p>共6题，每题100~600分，按通过人数排序。</p>
<button class="btn" style="margin-top:10px;">立即报名</button>
</div>
<div class="round">
<h3>AtCoder Regular Contest 175 (ARC 175)</h3>
<p class="info">时间：2025年4月13日 21:00 开始</p>
<p class="info">目标用户：~ 2799 分选手</p>
<button class="btn">查看详情</button>
</div>
</div>
<footer>
JapanCoder 是一个模拟 AtCoder 风格的编程竞赛平台，用于学习与练习。
</footer>
</body>
</html>
```
---
### ✅ 模板 3：OI Wiki 风格知识库首页（信息学奥赛百科）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OI Wiki 中文站</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background: #fff;
color: #333;
line-height: 1.8;
}
header {
background: #2d7dfb;
color: white;
padding: 1rem 2rem;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
}
.hero {
text-align: center;
padding: 3rem 1rem;
background: #f8f9fa;
}
.toc {
max-width: 1000px;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.category {
background: #f1f5f9;
padding: 1.2rem;
border-radius: 8px;
border-left: 4px solid #2d7dfb;
}
code {
background: #f0f0f0;
padding: 2px 6px;
border-radius: 4px;
font-family: Consolas, monospace;
font-size: 0.9rem;
}
footer {
text-align: center;
padding: 2rem;
background: #333;
color: white;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">数据结构</a></li>
<li><a href="#">算法</a></li>
<li><a href="#">数学</a></li>
<li><a href="#">杂项</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>欢迎来到 OI Wiki</h1>
<p>信息学奥林匹克竞赛 · 知识点全面整理 · 免费开源</p>
<p>涵盖 C++ 基础、图论、动态规划、数论等内容</p>
</section>
<div class="toc">
<div class="category">
<h3>📚 基础语法</h3>
<ul>
<li><a href="#">输入输出</a></li>
<li><a href="#">循环与条件</a></li>
<li><a href="#">函数与递归</a></li>
</ul>
</div>
<div class="category">
<h3>🧮 数据结构</h3>
<ul>
<li><a href="#">栈与队列</a></li>
<li><a href="#">堆与优先队列</a></li>
<li><a href="#">并查集</a></li>
<li><a href="#">线段树</a></li>
</ul>
</div>
<div class="category">
<h3>⚡ 算法</h3>
<ul>
<li><a href="#">DFS/BFS</a></li>
<li><a href="#">Dijkstra 最短路</a></li>
<li><a href="#">背包DP</a></li>
<li><a href="#">KMP 字符串匹配</a></li>
</ul>
</div>
<div class="category">
<h3>🔢 数学</h3>
<ul>
<li><a href="#">质数筛法</a></li>
<li><a href="#">快速幂</a></li>
<li><a href="#">GCD & LCM</a></li>
<li><a href="#">组合数学</a></li>
</ul>
</div>
</div>
<footer>
OI Wiki 是一个社区驱动的知识库项目，灵感来自原 OI-Wiki.org。欢迎贡献内容。
</footer>
</body>
</html>
```
---
### ✅ 模板 4：简洁风算法题库首页（轻量级 OJ）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SimpleOJ - 简单在线判题</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #fafafa;
}
header {
background: #444;
color: white;
padding: 1rem 2rem;
text-align: center;
}
.
problem-list {
max-width: 800px;
margin: 3rem auto;
padding: 0 1rem;
}
.
problem {
background: white;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
cursor: pointer;
}
.difficulty {
float: right;
color: #666;
font-size: 0.9rem;
}
.
easy { color: green; }
.medium { color: orange; }
.hard { color: red; }
footer {
text-align: center;
padding: 2rem;
color: #888;
}
</style>
</head>
<body>
<header>
<h1>SimpleOJ</h1>
<p>极简风格的在线评测系统</p>
</header>
<div class="
problem-list">
<h2>题目列表</h2>
<div class="
problem">
<h3>P1001 A+B
Problem <span class="difficulty
easy">简单</span></h3>
<p>输入两个整数 a 和 b，输出它们的和。</p>
</div>
<div class="
problem">
<h3>P1002 字符串反转 <span class="difficulty medium">中等</span></h3>
<p>将一个字符串逆序输出。</p>
</div>
<div class="
problem">
<h3>P1003 背包问题 <span class="difficulty hard">困难</span></h3>
<p>给定 n 个物品，求最大价值。</p>
</div>
</div>
<footer>
SimpleOJ - 仅供学习使用的静态网页模拟题库平台
</footer>
</body>
</html>
```
---
### ✅ 模板 5：多语言支持竞赛平台（国际化风格，如
CF 多语言）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>GlobalContest</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #fff;
}
header {
background: #1a1a1a;
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-weight: bold;
color: #00d1b2;
font-size: 1.6rem;
}
.lang-switch {
background: #333;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
}
.banner {
text-align: center;
padding: 4rem 1rem;
background: #001e3c;
color: white;
}
.features {
max-width: 1000px;
margin: 3rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.feature {
text-align: center;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
}
footer {
text-align: center;
padding: 2rem;
background: #333;
color: #aaa;
}
</style>
</head>
<body>
<header>
<div class="logo">GlobalContest</div>
<select class="lang-switch" onchange="alert('语言已切换')">
<option>🌐 中文</option>
<option>English</option>
<option>日本語</option>
<option>Русский</option>
</select>
</header>
<section class="banner">
<h1>World Programming Championship</h1>
<p>Supports 4 Languages | Real-time Rating | ICPC Rules</p>
<button style="background:#00d1b2; color:white; border:none; padding:10px 20px; margin-top:20px;">Register Now</button>
</section>
<div class="features">
<div class="feature">
<h3>🌍 多语言支持</h3>
<p>界面支持中文、英文、日文、俄文</p>
</div>
<div class="feature">
<h3>🏆 实时评分</h3>
<p>基于 Elo 算法动态更新分数</p>
</div>
<div class="feature">
<h3>📜 开放
题解</h3>
<p>赛后可查看他人代码与官方
题解</p>
</div>
</div>
<footer>
GlobalContest - Inspired by Codeforces & AtCoder | For Educational Use Only
</footer>
</body>
</html>
```
---
## 📦 使用说明：
1. 将任意代码保存为 `index.html`
2. 用浏览器打开即可查看效果
3. 可扩展功能：
- 添加 JavaScript 实现“点击题目跳转”
- 引入 Prism.js 实现代码高亮
- 使用 GitHub Pages 免费托管
---
这篇博客介绍了如何解决 Codeforces 比赛 CF1096D 中的一个问题。博主讨论了问题的思路，使用动态规划（DP）来解决不含子序列 'hard' 的字符串删除最小代价问题，并强调了在设定边界条件时的一个常见错误。文章包含了详细的转移方程和代码实现。
最低0.47元/天 解锁文章
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
