随着经济社会的不断发展，现阶段，对于知识产权的保护达到了前所未有的高度。
许多站长在网站运营的过程中难免会碰到这样或那样的版权问题，因此，为网站增加一个独立的版权申明页尤为重要。
效果预览
代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>著作权保护与维权指南</title>
<style>
body { font-family: 'Segoe UI', system-ui; line-height: 1.6; max-width: 1000px; margin: 2rem auto; padding: 0 1rem }
.section { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1) }
h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 0.5rem }
h3 { color: #34495e; margin-top: 1.5rem }
ul { padding-left: 1.5rem }
.reference { font-size: 0.9em; color: #7f8c8d; margin-top: 2rem }
.nav { display: flex; gap: 1rem; margin-bottom: 2rem }
.nav a { text-decoration: none; color: #3498db; padding: 0.5rem 1rem; border-radius: 4px }
.nav a:hover { background: #f0f3f5 }
.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 999;display: none;}
.modal {width:600px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;padding: 30px;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);z-index: 1000;}
@media (max-width: 768px) {.modal {width: 75%;height: auto;}}
#modal h2 {text-align:center;}
#modal p {font-weight:bold;}
#modal li {margin-bottom:10px;}
.overlay.closed {background: rgba(0, 0, 0, 0.3);pointer-events: none;}
.ignore {background: #2c3e50;color: antiquewhite;border: none;padding: 8px 24px;border-radius: 4px;cursor: pointer;float: right;margin-top: 16px; margin-right: 8px;}
.agreeBtn {background: #3498db;color: white;border: none;padding: 8px 24px;border-radius: 4px;cursor: pointer;float: right;margin-top: 16px;}
.agreeBtn:disabled {background: #bdc3c7;cursor: not-allowed;}
</style>
</head>
<body>
<header>
<h1>著作权保护与维权指南</h1>
<h3><p>更新时间：2025年5月6日</p></h3>
<div class="nav">
<a href="#category">著作类别</a>
<a href="#infringement">侵权类型</a>
<a href="#complaint">投诉流程</a>
</div>
</header>
<!-- 著作类别 -->
<section id="category" class="section">
<h2>一、受保护著作类别</h2>
<h3>1.1 基础作品类型</h3>
<ul>
<li>文字作品：包括原创文章、书籍、诗歌等文字表达形式</li>
<li>视听作品：涵盖影视作品、短视频、动画等动态影像内容</li>
<li>美术作品：包含绘画、书法、雕塑等造型艺术作品</li>
<li>音乐作品：涉及词曲创作、编曲等听觉艺术表达</li>
<li>软件作品：包括计算机程序及其相关文档</li>
</ul>
<h3>1.2 衍生作品类型</h3>
<ul>
<li>汇编作品：对已有作品进行独创性编排的成果</li>
<li>改编作品：基于原作品进行的二次创作形式</li>
<li>数据库作品：具有独创性的数据集合</li>
</ul>
<h3>1.3 合理使用范围</h3>
<ul>
<li>个人学习研究使用</li>
<li>适当引用的评论说明</li>
</ul>
</section>
<!-- 侵权类型 -->
<section id="infringement" class="section">
<h2>二、常见著作权侵权类型</h2>
<h3>2.1 直接侵权行为</h3>
<ul>
<li>内容抄袭：未经许可复制、传播他人作品</li>
<li>非法改编：擅自对原作品进行修改或二次创作</li>
<li>署名侵权：冒用他人署名或删除原作品署名</li>
</ul>
<h3>2.2 网络环境特殊侵权</h3>
<ul>
<li>账号仿冒：通过名称、头像等元素冒充权利主体</li>
<li>信息网络传播：未经许可的网络转载、链接行为</li>
<li>技术规避：破解数字权利管理技术措施</li>
</ul>
</section>
<!-- 投诉流程 -->
<section id="complaint" class="section">
<h2>三、侵权维权路径</h2>
<h3>3.1 平台投诉机制</h3>
<ul>
<li>邮件投诉：
<ol>
<li>为了固定和保存侵权举报材料，仅接受邮件举报；</li>
<li>本站唯一侵权举报受理邮箱为：admin@yourdomain.com；</li>
<li>侵权举报受理时效：5个工作日(工作日遇节假日自动顺延)；</li>
<li>邮件发送成功后您将收到自动回复邮件，此为唯一受理凭证；</li>
<li>请您按照规范填写《侵权举报电子材料》，并在邮件中以附件形式上传提交；</li>
<li>为了尽快解决侵权纠纷以及避免司法资源浪费，您同意双方通过友好协商的方式在本框架下开展调解。</li>
</ol>
</li>
</ul>
<h3>3.2 行政投诉程序</h3>
<ul>
<li>诉讼管辖选择：
<ul>
<li>被告住所地或侵权行为地法院；</li>
<li>网络服务器所在地视为侵权行为地；</li>
<li>因被告住所地与侵权行为地一致，故不接受管辖权异议。</li>
</ul>
</li>
</ul>
</section>
<footer class="reference">
<p>注：本指南参考《信息网络传播权保护条例》《著作权行政处罚实施办法》等法律法规进行编写，本指南最后更新于：2025年5月6日</p>
</footer>
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
<h2>用户须知</h2>
<p>您或您所在的主体可能即将发起侵权举报，请仔细阅读以下内容：</p>
<ul>
<li>为了证明您是(相关)权利人，您需要提供必要的个人信息</li>
<li>根据《个人信息保护法》等法律法规，我们将合理处理您的个人信息</li>
<li>使用本服务即表明您或您所在的主体同意我们的隐私服务条款政策</li>
<li>侵权举报前，请您仔细阅读本页特别是第三款“侵权维权路径”</li>
</ul>
<button class="agreeBtn" id="agreeBtn" disabled>我同意(<span id="countdown">30</span>s)</button>
<button class="ignore" id="ignore" onclick="history.back()">我再想想</button>
</div>
<script>
window.onload = function() {
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const agreeBtn = document.getElementById('agreeBtn');
const countdownEl = document.getElementById('countdown');
let seconds = 30;
overlay.style.display = 'block';
modal.style.display = 'block';
const timer = setInterval(() => {
seconds--;
countdownEl.textContent = seconds;
if(seconds <= 0) {
clearInterval(timer);
agreeBtn.disabled = false;
agreeBtn.textContent = '确认同意';
}
}, 1000);
agreeBtn.addEventListener('click', () => {
overlay.style.display = 'none';
modal.style.display = 'none';
overlay.style.opacity = '1';
modal.style.opacity = '1';
});
};
</script>
</body>
</html>
