传奇世界 H5 单机版的界面 UI（如登录页背景、游戏内血量条、技能栏样式）由前端文件（HTML/CSS/JS）控制，无需复杂编程，按以下步骤可实现自定义修改，重点解决 “找不到文件”“改后不生效” 问题。
一、先备工具：3 个 H5 UI 修改必备软件（新手也能用）
H5 界面修改依赖前端工具，无需专业开发软件，选以下 3 个轻量工具即可：
代码编辑器：用 VS Code（免费，支持 HTML/CSS 高亮）或 Notepad++（体积小，适合快速编辑），避免用记事本（无格式显示，易改错）；
浏览器调试工具：Chrome 或 Edge 浏览器自带（按 F12 打开），可实时预览修改效果，不用反复重启 H5 服务；
图片处理工具：Photoshop 或在线工具（如 Canva），用于修改图标、背景图（H5 UI 图片多为 PNG 格式，注意尺寸适配）。
二、关键一步：找到 H5 单机版 UI 核心文件（路径固定）
H5 单机版的 UI 文件集中在服务端的 “前端资源目录”，不同端路径略有差异，但核心文件夹命名统一，按以下顺序找：
打开 H5 单机版服务端根目录，找到命名为static“res” 或web的文件夹（90% 的 H5 端 UI 文件在这里）；
核心子文件夹功能（重点记这 3 个）：
css：控制界面样式（颜色、尺寸、位置），如登录页背景、血量条样式；
images/img：存储 UI 图片（登录背景图、技能图标、背包按钮）；
html/views：控制界面结构（如登录页的账号输入框位置、游戏内技能栏布局）；
特殊文件：game.js（部分端用此文件控制动态 UI，如角色头像切换、弹窗样式），通常在js文件夹内。
三、分模块修改：常见 UI 需求实操（附文件路径 + 代码）
按 “登录界面→游戏内界面” 分类，每个需求给具体修改步骤，避免盲目找文件。
1. 登录界面修改（最常改：背景图、按钮样式）
需求 1：替换登录页背景图
找文件：进入static/images/login/，找到login_bg.png（登录背景图，部分端命名为bg.jpg）；
改图片：用图片工具制作尺寸一致的图片（建议尺寸 1920×1080，保持 PNG 格式），替换原文件（文件名必须和原文件一致，否则不显示）；
补全步骤：若背景图拉伸变形，打开static/css/login.css，找到以下代码，添加background-size: cover（保持背景铺满屏幕）：
.login-container {
background: url("../images/login/login_bg.png") no-repeat; /* 原背景图路径 */
background-size: cover; /* 新增：解决拉伸问题 */
width: 100%;
height: 100vh;
}
需求 2：修改登录按钮样式（颜色、字体）
找文件：打开static/css/login.css，搜索.login-btn（登录按钮样式类）；
改样式：按需求调整颜色、字体、圆角，示例修改（原样式可能为灰色按钮，改为橙色）：
.login-btn {
width: 280px;
height: 48px;
background: #ff7a00; /* 原背景色改为橙色 */
color: #fff; /* 文字白色 */
font-size: 18px; /* 字体放大到18号 */
border-radius: 8px; /* 按钮圆角8px，更圆润 */
border: none; /* 取消边框 */
}
/* 新增：鼠标 hover 时按钮变色 */
.login-btn:hover {
background: #e06a00;
}
2. 游戏内界面修改（核心：血量条、技能栏、背包）
需求 1：调整角色血量条颜色（默认红色改蓝色）
找文件：进入static/css/，打开game.css（游戏内样式文件，部分端叫role.css）；
改样式：搜索.hp-bar（血量条类），修改background-color：
.hp-bar {
width: 200px;
height: 20px;
background-color: #32cd32; /* 原红色#ff0000改为绿色，或#1e90ff蓝色 */
border-radius: 10px;
overflow: hidden;
}
/* 若有血量条背景（灰色底），不用改.hp-bar-bg类 */
.hp-bar-bg {
background-color: #666;
}
需求 2：修改技能栏图标尺寸（默认 32×32 改 40×40）
第一步：改图标图片尺寸（避免拉伸）
进入static/images/skill/，找到技能图标（如skill_1.png“skill_2.png”），用图片工具将尺寸改为 40×40（所有技能图标尺寸需统一）；
第二步：改技能栏样式（适配新图标）
.skill-icon {
width: 40px; /* 原32px改为40px */
height: 40px; /* 同步修改高度 */
margin: 0 5px; /* 图标间距，可按需求调为6px */
background-size: 100% 100%; /* 保持图标铺满容器 */
}
/* 同步改技能栏容器宽度（避免图标挤在一起） */
.skill-bar {
width: 420px; /* 原340px，按“图标宽×数量+间距”计算：40×10 + 5×9=445，可设450px */
height: 50px;
margin: 0 auto;
}
打开static/css/game.css，搜索.skill-icon（技能图标类），修改宽高：
需求 3：调整背包界面布局（扩大背包格子）
找文件：打开static/html/bag.html（背包界面结构文件），找到<div class="bag-grid">（背包格子容器）；
改格子尺寸：修改width“height” 属性，同时调整格子内物品图标尺寸：
<!-- 原背包格子代码 -->
<div class="bag-grid" style="width: 60px; height: 60px;"> <!-- 原48px改为60px -->
<img class="item-icon" src="../images/item/item_1.png" style="width: 50px; height: 50px;"> <!-- 原40px改为50px -->
</div>
补全样式：打开static/css/bag.css，修改.bag-container（背包容器）宽度，避免格子换行：
.bag-container {
width: 680px; /* 原520px，按“格子宽×列数+间距”计算：60×10 + 10×9=690，设700px */
height: 450px;
background: rgba(0,0,0,0.7);
padding: 10px;
}
四、改后不生效？3 个高频问题解决
浏览器缓存导致不显示：
打开 H5 游戏页面，按Ctrl+Shift+R强制刷新（清除缓存），或在浏览器设置里删除 “最近 1 小时” 缓存；
文件路径写错：
检查 CSS 里的图片路径（如../images/login/login_bg.png），“../” 代表上一级目录，若图片在static/img/，路径要改为../img/login_bg.png；
动态 UI 改了没生效（如角色头像）：
找到static/js/game.js，搜索头像相关代码（如var headImg = "../images/head/head_1.png"），同步修改 JS 里的图片路径，否则动态切换时会恢复默认。
五、验证修改效果（必做步骤）
启动 H5 单机版服务端（如运行start.bat），打开浏览器访问本地地址（通常是http://127.0.0.1:8080）；
按 F12 打开浏览器调试工具，切换到 “Elements” 标签，找到修改过的 CSS 类（如.login-btn），实时调整数值（如改background颜色），预览满意后再保存到本地文件；
完整测试：从登录页→进入游戏→打开背包 / 技能栏，确认所有修改的 UI 元素正常显示，无错位、拉伸问题。
一、先备工具：3 个 H5 UI 修改必备软件（新手也能用）
H5 界面修改依赖前端工具，无需专业开发软件，选以下 3 个轻量工具即可：
代码编辑器：用 VS Code（免费，支持 HTML/CSS 高亮）或 Notepad++（体积小，适合快速编辑），避免用记事本（无格式显示，易改错）；
浏览器调试工具：Chrome 或 Edge 浏览器自带（按 F12 打开），可实时预览修改效果，不用反复重启 H5 服务；
图片处理工具：Photoshop 或在线工具（如 Canva），用于修改图标、背景图（H5 UI 图片多为 PNG 格式，注意尺寸适配）。
二、关键一步：找到 H5 单机版 UI 核心文件（路径固定）
H5 单机版的 UI 文件集中在服务端的 “前端资源目录”，不同端路径略有差异，但核心文件夹命名统一，按以下顺序找：
打开 H5 单机版服务端根目录，找到命名为static“res” 或web的文件夹（90% 的 H5 端 UI 文件在这里）；
核心子文件夹功能（重点记这 3 个）：
css：控制界面样式（颜色、尺寸、位置），如登录页背景、血量条样式；
images/img：存储 UI 图片（登录背景图、技能图标、背包按钮）；
html/views：控制界面结构（如登录页的账号输入框位置、游戏内技能栏布局）；
特殊文件：game.js（部分端用此文件控制动态 UI，如角色头像切换、弹窗样式），通常在js文件夹内。
三、分模块修改：常见 UI 需求实操（附文件路径 + 代码）
按 “登录界面→游戏内界面” 分类，每个需求给具体修改步骤，避免盲目找文件。
1. 登录界面修改（最常改：背景图、按钮样式）
需求 1：替换登录页背景图
找文件：进入static/images/login/，找到login_bg.png（登录背景图，部分端命名为bg.jpg）；
改图片：用图片工具制作尺寸一致的图片（建议尺寸 1920×1080，保持 PNG 格式），替换原文件（文件名必须和原文件一致，否则不显示）；
补全步骤：若背景图拉伸变形，打开static/css/login.css，找到以下代码，添加background-size: cover（保持背景铺满屏幕）：
.login-container {
background: url("../images/login/login_bg.png") no-repeat; /* 原背景图路径 */
background-size: cover; /* 新增：解决拉伸问题 */
width: 100%;
height: 100vh;
}
需求 2：修改登录按钮样式（颜色、字体）
找文件：打开static/css/login.css，搜索.login-btn（登录按钮样式类）；
改样式：按需求调整颜色、字体、圆角，示例修改（原样式可能为灰色按钮，改为橙色）：
.login-btn {
width: 280px;
height: 48px;
background: #ff7a00; /* 原背景色改为橙色 */
color: #fff; /* 文字白色 */
font-size: 18px; /* 字体放大到18号 */
border-radius: 8px; /* 按钮圆角8px，更圆润 */
border: none; /* 取消边框 */
}
/* 新增：鼠标 hover 时按钮变色 */
.login-btn:hover {
background: #e06a00;
}
2. 游戏内界面修改（核心：血量条、技能栏、背包）
需求 1：调整角色血量条颜色（默认红色改蓝色）
找文件：进入static/css/，打开game.css（游戏内样式文件，部分端叫role.css）；
改样式：搜索.hp-bar（血量条类），修改background-color：
.hp-bar {
width: 200px;
height: 20px;
background-color: #32cd32; /* 原红色#ff0000改为绿色，或#1e90ff蓝色 */
border-radius: 10px;
overflow: hidden;
}
/* 若有血量条背景（灰色底），不用改.hp-bar-bg类 */
.hp-bar-bg {
background-color: #666;
}
需求 2：修改技能栏图标尺寸（默认 32×32 改 40×40）
第一步：改图标图片尺寸（避免拉伸）
进入static/images/skill/，找到技能图标（如skill_1.png“skill_2.png”），用图片工具将尺寸改为 40×40（所有技能图标尺寸需统一）；
第二步：改技能栏样式（适配新图标）
.skill-icon {
width: 40px; /* 原32px改为40px */
height: 40px; /* 同步修改高度 */
margin: 0 5px; /* 图标间距，可按需求调为6px */
background-size: 100% 100%; /* 保持图标铺满容器 */
}
/* 同步改技能栏容器宽度（避免图标挤在一起） */
.skill-bar {
width: 420px; /* 原340px，按“图标宽×数量+间距”计算：40×10 + 5×9=445，可设450px */
height: 50px;
margin: 0 auto;
}
打开static/css/game.css，搜索.skill-icon（技能图标类），修改宽高：
需求 3：调整背包界面布局（扩大背包格子）
找文件：打开static/html/bag.html（背包界面结构文件），找到<div class="bag-grid">（背包格子容器）；
改格子尺寸：修改width“height” 属性，同时调整格子内物品图标尺寸：
<!-- 原背包格子代码 -->
<div class="bag-grid" style="width: 60px; height: 60px;"> <!-- 原48px改为60px -->
<img class="item-icon" src="../images/item/item_1.png" style="width: 50px; height: 50px;"> <!-- 原40px改为50px -->
</div>
补全样式：打开static/css/bag.css，修改.bag-container（背包容器）宽度，避免格子换行：
.bag-container {
width: 680px; /* 原520px，按“格子宽×列数+间距”计算：60×10 + 10×9=690，设700px */
height: 450px;
background: rgba(0,0,0,0.7);
padding: 10px;
}
四、改后不生效？3 个高频问题解决
浏览器缓存导致不显示：
打开 H5 游戏页面，按Ctrl+Shift+R强制刷新（清除缓存），或在浏览器设置里删除 “最近 1 小时” 缓存；
文件路径写错：
检查 CSS 里的图片路径（如../images/login/login_bg.png），“../” 代表上一级目录，若图片在static/img/，路径要改为../img/login_bg.png；
动态 UI 改了没生效（如角色头像）：
找到static/js/game.js，搜索头像相关代码（如var headImg = "../images/head/head_1.png"），同步修改 JS 里的图片路径，否则动态切换时会恢复默认。
五、验证修改效果（必做步骤）
启动 H5 单机版服务端（如运行start.bat），打开浏览器访问本地地址（通常是http://127.0.0.1:8080）；
按 F12 打开浏览器调试工具，切换到 “Elements” 标签，找到修改过的 CSS 类（如.login-btn），实时调整数值（如改background颜色），预览满意后再保存到本地文件；
完整测试：从登录页→进入游戏→打开背包 / 技能栏，确认所有修改的 UI 元素正常显示，无错位、拉伸问题。