静态高颜值服务器价格表落地页，自适应多端，极简部署

28天前发布

212

这是一款基于原生 HTML + CSS + JS 开发的静态落地页，没有任何后端依赖（无需 PHP、Java、Node.js 等），也不依赖复杂的构建工具。它的核心优势如下：

0 后端，纯静态：丢进任意 Web 服务器（如 Nginx、宝塔纯静态站点）甚至对象存储（OSS/COS）即可访问。

极致响应式设计 (PC/手机双重体验)：

电脑端：呈现专业严谨的类 Excel 数据表格，方便客户快速对比配置（CPU、内存、带宽、价格等）。

手机端：自动切换为精美大气的“卡片式布局”，避免了手机端看大表格需要左右滑动的反人类体验。

多级分类 Tab 切换：支持“大类（如：宿主机） -> 细分地区（如：香港、美国）”的二级导航，配置再多也井井有条。

本地零跨域 (CORS) 烦恼：数据直接以全局变量形式存储在 `pricing.js` 文件中，本地双击 `index.html` 即可完美预览，无需搭建本地服务（Live Server），非常方便修改数据时随时预览。

友链与圆形Logo：内置了美观的圆形 Logo 展现区以及底部的友情链接区。
其实说白了这个页面就是有人找我写的，但是没啥含金量，就是随便写的，你们用的上的可以下载下载，哈哈哈哈
搭建教程：

– 登录你的宝塔面板。

– 点击左侧菜单的【网站】-> 【添加站点】。

– 域名填入你准备好的域名（如果没有域名，填服务器 IP 也可以）。

– PHP版本选择【纯静态】（你非要选择个php版本也不影响）

– 点击提交。

上传并解压

– 进入刚才创建的站点根目录。

– 清空里面默认生成的 `index.html` 和 `404.html`。

– 点击上传】，把你打包好的项目 `.zip` 上传上去。

– 右键上传好的压缩包，选择【解压】。

替换你自己的数据和信息

上线后，你需要把页面里的数据换成你自己的：

– 修改服务器价格数据：

打开 `assets/data/pricing.js` 文件，你会看到所有的数据都以 JSON 格式保存在 `window.pricingData` 变量里。你只需要按照里面的层级结构，修改或新增你自己的服务器分类、配置和价格即可。修改后保存，刷新网页立即生效。

– 修改 Logo 图片：

把根目录下的图片文件（如现有的 `.jpg` 或 `.png`）替换成你的 Logo。同时打开 `index.html`，搜索 `<img src=”`，把图片路径改成你的新 Logo 文件名。

– 修改购买链接 / 联系方式：

打开 `index.html` 或 `assets/js/main.js`，找到“立即购买”或“联系客服”的 `<a>` 标签或点击事件，将 URL 替换为你的 QQ 快捷交谈链接、TG 链接或购买工单链接。

– 修改网页标题和友链：

打开 `index.html`，修改 `<title>` 标签里的文字；并在页面底部的 `<div class=”footer-links”>` 区域修改你的友情链接。
图片预览：

2人已评分

源码测评