前言为什么玩审查元素对于前端开发者或喜欢折腾的网页用户来说浏览器自带的“开发者工具”F12 或右键“检查”是一个充满乐趣的宝库。在洛谷Luogu这样的在线评测平台上除了刷题我们还可以通过修改页面的 HTML 和 CSS 来玩出一些小彩蛋比如改等级图标、替换 AC/WA 标签文字、美化个人主页等。这些修改仅在你的浏览器本地生效刷新页面就会恢复不会影响服务器数据更不会封号。它更像是一种前端学习的小实验让你更直观地理解网页是如何被渲染和控制的。注意本文所有操作均基于浏览器开发者工具的“审查元素”功能仅供学习娱乐。请勿用于恶意篡改、作弊或干扰他人浏览。1. 修改用户等级图标洛谷的用户等级图标如“萌新”、“蒟蒻”、“大佬”等是通过 CSS 类名和背景图片实现的。找到你的等级图标元素修改其background-image的 URL就可以换成任意你喜欢的图片甚至动图。操作步骤打开你的个人主页或任意显示等级的地方。右键点击等级图标选择“检查”。在 Elements 面板中找到包含class为am-badge或类似等级样式的元素。在 Styles 面板中找到background-image属性将其值改为其他图片的 URL例如url(https://example.com/your-image.png)。回车后图标立即改变。效果示例把“大佬”图标换成自定义的“猫猫头”。2. 替换 AC/WA 等评测状态标签文字题目列表或提交记录中的 ACAccepted、WAWrong Answer等标签其文字内容直接写在 HTML 里。我们可以直接修改文本节点把它们改成任何你想显示的文字。操作步骤找到任意一个 AC 或 WA 标签右键“检查”。在 Elements 面板中双击标签内的文本如Accepted。直接输入新文字例如把Accepted改成完美通过把Wrong Answer改成再想想~。回车确认页面上的标签文字即刻更新。注意修改后同页面上所有相同标签不会联动改变你需要逐个修改。3. 修改个人主页简介样式个人主页的“个人简介”部分通常由一个div或p包裹。你可以通过修改它的内联样式或添加 CSS 规则改变字体、颜色、背景、边框等。操作步骤打开你的个人主页找到简介文本区域。右键“检查”定位到包裹简介的 HTML 元素。在 Elements 面板右侧的 Styles 子面板中点击element.style或添加新的样式规则。尝试添加以下样式每输入一条按回车生效color: #ff6b6b;改变文字颜色font-size: 18px;增大字体background-color: #f0f8ff;添加浅蓝色背景padding: 10px;增加内边距border: 2px dashed #4ecdc4;添加虚线边框修改后你的个人简介立刻变得独一无二。4. 隐藏“难题”或“比赛”板块如果你想暂时专注于某个板块可以把其他干扰板块隐藏掉。这通过给对应元素的 CSS 添加display: none;实现。操作步骤找到你想隐藏的板块如侧边栏的“比赛”列表。右键“检查”找到该板块最外层的容器元素通常是一个div或section。在 Styles 面板的element.style中输入display: none;并回车。整个板块瞬间消失页面布局可能随之调整。想恢复显示删除刚添加的display: none;样式即可。5. 修改页面标题和 Favicon浏览器的标签页标题和图标也可以临时修改。修改标题在 Elements 面板按 CtrlFCmdF搜索title。双击title标签内的文字改为你想要的内容如“我的专属洛谷”。标签页标题即刻变化。修改 Favicon搜索link relicon或link relshortcut icon。双击其href属性值替换成新图标的 URL。标签页图标会更新可能需要稍等或刷新。6. 给按钮添加点击动画通过添加 CSS 动画可以让按钮点击时有反馈效果。操作步骤找到一个按钮如“提交”按钮右键“检查”。在 Styles 面板的element.style中添加transition: all 0.2s;再添加一条悬停效果:hover { transform: scale(1.05); }注意在element.style中直接写:hover可能不生效可以改为在父元素上添加一个临时类名并定义样式或使用浏览器的“”按钮添加伪类规则。点击按钮感受平滑的缩放效果。7. 替换背景图片或主题色想给洛谷换一套皮肤可以修改body或主要容器的背景。操作步骤右键页面空白处“检查”body标签。在 Styles 面板添加background-image: url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlibrb-1.2.1autoformatfitcropw1350q80); background-size: cover; background-attachment: fixed;整个页面背景会变成你指定的图片。你也可以修改主题色变量如果洛谷使用了 CSS 变量搜索--primary-color之类的属性进行修改。8. 修改字体和文字阴影让所有文字使用你喜欢的字体并添加一些特效。操作步骤在 Elements 面板选中body或html标签。在 Styles 面板添加font-family: Comic Sans MS, cursive, sans-serif; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);页面所有文字除非内联样式覆盖都会应用新字体和阴影。9. 临时禁用某个功能或按钮通过设置pointer-events: none和opacity: 0.5可以让某个元素无法点击并半透明模拟“禁用”状态。操作步骤找到你想禁用的按钮或链接右键“检查”。在 Styles 面板添加pointer-events: none; opacity: 0.5; cursor: not-allowed;该元素变灰且无法点击。10. 在页面任意位置插入自定义 HTML你甚至可以在页面中插入一段新的 HTML 内容比如一个浮动提示框。操作步骤在 Elements 面板右键任意元素选择“Edit as HTML”。在合适的位置比如在某个div的结束标签前粘贴以下代码div styleposition: fixed; bottom: 20px; right: 20px; background: #4ecdc4; color: white; padding: 10px 15px; border-radius: 5px; z-index: 9999; 这是你插入的浮动提示 /div按 CtrlEnterCmdEnter保存页面右下角会出现一个固定位置的提示框。注意事项与提醒本地生效所有修改仅在你的浏览器当前标签页生效刷新页面或关闭标签页即消失。不影响他人你不会修改洛谷服务器上的任何数据其他用户看不到你的改动。学习为主这是学习 HTML、CSS 和浏览器开发者工具的绝佳方式。不要滥用请勿使用这些技巧制作虚假截图进行误导、诈骗或破坏社区氛围。兼容性不同浏览器Chrome、Firefox、Edge的开发者工具界面略有差异但功能大同小异。结语通过审查元素魔改页面就像给洛谷穿上了一件“临时皮肤”既能满足个性化的小心思又能加深对前端技术的理解。希望这 10 个小彩蛋能给你带来一些乐趣和启发。如果你发现了更多好玩的修改方式欢迎在评论区分享Happy Hacking! (仅限前端)