网站首页 >> 源码 >> 正文
标题

zblog系统VIP介绍页面,支持一键添加,完美适配

逍遥   01月01日 10:25   16℃   0
内容

zblog系统VIP介绍页面,支持一键添加	,完美适配,image.png,VIP介绍页面,第1张

  1. 设计风格:采用现代简约风格 ,包含 4 个会员等级(免费、基础 、高级、旗舰),高级会员标注 "最受欢迎" 标签,视觉层次分明。

  2. 响应式布局:适配移动端、平板和 PC 端 ,在不同设备上显示效果良好。

  3. 交互效果:卡片 hover 上浮动画 、平滑滚动、回到顶部按钮等,提升用户体验 。

  4. ZBlog 兼容

    • 复用主题的头部和底部文件(header.php、footer.php),保持网站风格统一。

    • 支持 ZBlog 的模板变量(如$zbp->Config('system')->blogname) ,动态显示网站名称。

    • 可直接作为独立页面模板(page/vip.htm),在 ZBlog 后台创建页面时选择该模板 。

  5. 无插件依赖:纯 HTML+CSS+JS 实现,无需安装任何插件 ,保持网站轻量。

使用方法

  1. 在 ZBlog 主题目录(template/你的主题名/)下创建page文件夹(如果没有)。

  2. page文件夹中创建vip.htm文件 ,将上述代码复制粘贴进去 。

  3. 登录 ZBlog 后台,创建新页面,模板选择 "vip"(即vip.htm)。

  4. 发布页面后 ,访问该页面即可看到 VIP 介绍效果。

自定义修改建议

  1. 颜色修改:在tailwind.configcolors中修改各会员等级的颜色和主色调 。

  2. 内容修改

    • 修改会员名称 、价格、有效期等信息。

    • 编辑权益列表(添加 / 删除li元素,修改benefit-check/benefit-uncheck类控制是否勾选)。

    • 更新常见问题内容,使其符合你的网站服务 。

  3. 样式调整:根据需要修改卡片大小、间距 、阴影效果等(在@layer utilities中调整相关类) 。

  4. 跳转链接:将 "立即开通" 按钮的href属性修改为你的会员购买页面或支付链接。

附件
未命名.html
下载文件
附件购买
售价:1 积分

登录注册购买