微信图文文章页模板 | 会议微站 H5（九宫格导航 + 图文正文），开箱即用

基于 HTML + CSS + jQuery 打造的微信图文文章 / 会议微站模板。开箱即用，替换品牌素材即可上线。

会议、活动、展会的主办方经常需要在微信内快速搭建一个”公众号菜单落地页 + 图文文章页”的轻量微站：首页用九宫格导航承载会议信息、日程、专家介绍等入口，点击后进入排版规范的图文正文页。这套模板把上述两类页面的移动端排版、顶部导航栏与下拉菜单全部做好，替换文案与图片即可直接发布。

模板为纯静态移动端 H5 页面（viewport 已锁定缩放，内容区最大宽度 750px），可嵌入公众号菜单、微信群、朋友圈分享等微信生态场景。

模板亮点

1. 两页打通”入口 + 正文”完整闭环

• index.html 导航首页：通栏 Banner + 九宫格图标导航（会议信息、代表邀请函、秘书处、注册须知、会前优惠注册、大会日程、专家介绍、住宿预订、餐饮观光），三列栅格布局，点击进入对应文章页
• article.html 图文正文页：模拟微信文章页的顶部栏，含”首页”返回入口、当前栏目名与右侧下拉菜单，正文按”标题 + 分组字段 + 缩进列表”的图文排版规范组织

2. 微信风格的信息排版体系

正文页内置会议类内容的标准字段排版：主题、组织架构（主办 / 协办 / 秘书处）、时间地点、学分证书等，标签着色、层级缩进、备注小字一应俱全，直接替换文字即可发布一篇排版规范的图文。

3. 顶部栏下拉菜单交互

基于 jQuery 实现的 slideDown / slideUp 下拉菜单，点击展开九大栏目快捷入口，失焦自动收起，与微信内置浏览器的返回习惯无缝衔接。

4. 移动端适配完善

• 750px 内容区上限 + 320px 下限，兼顾大屏手机与小屏设备
• 内置 480px / 320px 两档媒体查询，栅格间距、字号、菜单宽度自动收窄
• 触控高亮（tap-highlight）已做兼容处理

5. 结构极简，二次开发成本低

仅 2 个页面、1 份样式表、1 个 jQuery 文件，无构建工具、无框架依赖，任何人均可维护；九宫格图标与菜单项均为重复结构，复制即可扩展栏目。

技术栈

技术	版本	用途
HTML5 / CSS3	–	页面结构与移动端布局
jQuery	1.10.0	顶部下拉菜单交互
normalize.css	–	浏览器样式统一

项目结构

wxym/
├── index.html          # 导航首页：Banner + 九宫格栏目入口
├── article.html        # 图文文章正文页（顶栏 + 下拉菜单 + 正文排版）
├── css/
│   ├── style.css       # 全部页面样式（含响应式媒体查询）
│   └── normalize.css   # 样式重置
├── js/
│   └── jquery.min.js   # jQuery 1.10.0
└── img/                # Banner、九宫格图标、菜单图标等素材

快速开始

纯静态模板，无需安装任何依赖。

# 方式一：浏览器直接打开
双击 index.html 即可预览

# 方式二：本地静态服务器（推荐，便于在手机上真机调试）
cd wxym
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000

# 方式三：VS Code 安装 Live Server 插件，右键 index.html → Open with Live Server

建议使用浏览器开发者工具切换到手机视口（iPhone / Android 尺寸）预览。

二次开发指南

需求	操作
更换品牌素材	替换 img/banner.png 与 img/home_ico*.png，同名覆盖即可
修改栏目	首页九宫格与正文页下拉菜单均为 dl/li 重复结构，复制或删除节点
修改文案 / 链接	直接编辑 HTML 内文字与 href，正文页字段排版照搬现有 dl 结构
更换主题色	修改 css/style.css 中 .ui-topb 的 #00a0e9 与 .ui-color 的 #20407d
增加文章页	复制 article.html，替换正文内容与顶栏栏目名，并在首页/菜单中加链接

适用场景

学术会议微站、行业峰会 / 论坛微信专题页、公众号图文落地页、展会导览页、培训报名说明页，以及任何需要在微信内传播的”导航首页 + 图文正文”轻量 H5。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 天起	替换素材后当天上线
页面还原度	需反复调试	微信风格排版开箱即用
交互与动画	自行实现菜单交互	下拉菜单已内置
移动端适配	需逐一适配小屏	320/480/750 三档已覆盖
维护成本	样式结构自担	2 页 + 1 份样式，随手可改

在线预览

模板为纯静态页面，将整个目录上传至任意静态托管（GitHub Pages、Vercel、阿里云 OSS 等）即可获得在线访问地址。

http://case.fedshare.cn/wxym/