EdgeOne 地域拦截自定义页面源码 | 轻量化访问限制提示 HTML 模板

一、页面介绍

这是一套适配 EdgeOne 站点地域访问拦截的自定义提示页面，采用弹窗居中卡片式设计，视觉清晰、轻量化（整体代码小于 2KB），适配 PC / 手机全端。

图片[1]-EdgeOne 地域拦截自定义页面源码 | 轻量化访问限制提示 HTML 模板

页面功能特点：

顶部玫红色标题栏：白色醒目大标题 + 右上角关闭按钮
正文居中展示三段提示文字，区分蓝 / 红 / 灰三色层级，警告信息一目了然
双蓝色功能按钮：「前往首页」回到网站主页、「联系站长」跳转 QQ 客服
底部浅绿色请求 ID 框，展示 {{EO_REQ_ID}} 日志变量，方便排查拦截记录

交互细节

页面自动水平 + 垂直居中，阴影圆角卡片质感柔和不刺眼
移动端自适应，最大宽度限制保证大屏不会过宽、小屏自动缩放

轻量化优势

无外部 JS、无图片资源，纯 CSS + 原生 HTML，加载速度极快
代码高度精简，可直接部署在 EdgeOne 自定义拦截页面、Nginx 403 拦截页使用

<!DOCTYPE html><html lang=zh-CN>
<head>
<meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1">
<style>*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff}
.box{width:90%;max-width:620px;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.top{height:100px;background:#ff4d94;display:flex;align-items:center;justify-content:center;position:relative}
.top h1{color:#fff;font-size:28px;font-weight:bold}
.close{position:absolute;right:24px;color:#fff;font-size:32px;cursor:pointer}
.main{padding:40px 30px;text-align:center;background:#fff}
.p1{color:#0086cc;font-size:22px;margin-bottom:16px;font-weight:500}
.p2{color:#f40;font-size:22px;margin-bottom:16px;font-weight:500}
.p3{color:#555;font-size:18px;margin-bottom:40px}
.btn-wrap{display:flex;gap:40px;justify-content:center;margin-bottom:36px}
.btn{width:180px;padding:16px 0;background:#ff4d94;color:#fff;border:none;border-radius:8px;font-size:20px;text-decoration:none}
.req{padding:18px 24px;background:#e6f7ef;color:#00a86b;border-radius:10px;font-size:24px;font-family:monospace}
</style>
</head>
<body>
<div class=box>
  <div class=top>
    <h1>您所在国家区域受访问限制</h1>
  </div>
  <div class=main>
    <p class=p1>本站禁止中国大陆以外地区访问</p>
    <p class=p2>当前访问存在异常，已触发防御拦截</p>
    <p class=p3>检测到代理访问，请确认是否使用代理IP</p>
    <div class=btn-wrap>
      <a href="https://www.902d.com" target="_blank" rel="noopener noreferrer nofollow" class=btn>前往首页</a>
      <a href="https://qm.qq.com/q/5gosvkx7Ti" target="_blank" rel="noopener noreferrer nofollow" class=btn>联系站长</a>
    </div>
    <div class=req>RequestId: {{EO_REQ_ID}}</div>
  </div>
</div>
</body>
</html>

2026 年第 3 期

产品动态四月刊

聚焦前沿资讯，引领行业未来

立即查看往期回顾

网站名称：玩转网
本文链接：
版权声明：知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
本站资源仅供个人学习交流,转载时请以超链接形式标明文章原始出处,（如有侵权联系删除）