模板基础说明
这款模板参照腾讯视频官网UI界面开发，完美适配苹果CMS V10程序，整体采用当下主流扁平化设计风格，页面观感简约清爽，适配各类影视资源站点搭建使用。
模板标准色彩体系
| 色彩用途 | 色值代码 | 使用作用说明 |
| 主色调 | #0052D9 | 用于顶部导航、功能按钮、页面链接、标题装饰元素 |
| 主色悬浮色 | #0040B0 | 鼠标悬浮在主色元素上时加深变色效果 |
| 主色浅色底色 | #E8F0FE | 导航悬浮背景、搜索输入框聚焦光晕底色 |
| 重点强调色 | #FF6F00 | 影片评分、榜单前三名、收藏按钮标识 |
| 强调色浅底色 | #FFF3E0 | 收藏按钮浅色背景底色 |
模板完整文件结构
模板文件夹命名为muban，内部目录划分清晰，所有样式、脚本、页面文件分类存放，方便后期修改维护：
css目录：存放style.css全局样式文件，模板全部自定义样式统一写入此文件
js目录：存放script.js交互脚本，包含轮播、导航、返回顶部等功能代码
images目录：存放模板所需图片素材资源
html/public公共目录：包含全站头部head.html、底部foot.html、资源引入include.html、通用分页paging.html
html/index目录：首页index.html，集成轮播Banner与全部分类内容展示
html/vod视频模块目录：视频详情、播放页、搜索页、分类页、筛选页全套页面
html/art文章模块目录：文章详情、搜索、分类、筛选配套页面
模板核心功能特性
置顶固定导航栏页面滚动时导航自动吸附在页面顶部，方便随时切换栏目与搜索
移动端汉堡导航菜单屏幕宽度小于768px自动隐藏顶部导航，点击汉堡按钮展开全屏菜单面板
首页Banner轮播组件默认自动切换，配备左右切换箭头与底部圆点指示器，可控播放暂停
全规格响应式布局设置1280px、1024px、768px、480px多套适配断点，多终端自动调整排版
多播放源标签切换播放页面采用Tab分组形式，一键切换不同播放线路
返回顶部功能按钮页面滚动超过400像素自动显示，一键回到页面顶端
浏览历史下拉面板顶部导航集成历史记录，快速跳转之前浏览过的影片
搜索框聚焦动效点击搜索框时边框高亮渐变动画，提升交互质感
CSS Grid网格布局视频列表默认6列、文章列表3列，随屏幕尺寸自动增减列数
HTML5标准语义化标签全程使用header、nav、main、section、footer标签构建页面结构，利于SEO收录
图片懒加载机制支持data-original属性配置图片地址，减少页面初始加载资源
各分辨率响应式适配规则
| 屏幕分辨率 | 视频列表列数 | 文章列表列数 | 额外适配调整 |
| 宽度大于1280px | 6列 | 3列 | 完整展示导航栏与搜索框 |
| 1024px - 1280px | 5列 | 2列 | 缩小搜索框尺寸，精简页面留白 |
| 768px - 1024px | 4列 | 2列 | 视频详情页改为垂直上下布局 |
| 480px - 768px | 3列 | 2列 | 隐藏顶部导航，展示汉堡菜单 |
| 宽度小于480px | 2列 | 1列 | 缩小文字字号，压缩卡片间距 |
模板依赖配套资源
| 文件名称 | 资源作用说明 |
| jquery.js | jQuery基础库，苹果CMS系统自带无需额外上传 |
| jquery.lazyload.js | 实现页面图片延迟加载功能 |
| jquery.autocomplete.js | 搜索框输入关键词自动联想补全 |
| jquery.superslide.js | 首页轮播幻灯片核心插件 |
| base.js | 苹果CMS系统基础功能脚本 |
| home.css | 苹果CMS系统默认基础样式文件 |
模板开发修改规范
1、文件统一采用UTF-8无BOM编码格式，避免页面乱码问题；
2、页面强制使用header、nav、main、section、footer等语义化标签，优化搜索引擎抓取；
3、所有自定义样式统一写入css/style.css，不分散写入各个页面；
4、全部自定义交互脚本存放至js/script.js，统一管理方便维护；
5、模板内苹果CMS调用标签仅可修改num数值调整列表展示数量，其余系统参数保持原样不改动。
资源截图：
1首页
2视频封面
3视频列表
4视频详情页
5视频播放页
6资讯封面列表
7资讯内容
8手机端