效果图

整套配色体系

完整目录文件结构

muban/
├── css/
│   └── style.css          # 模板全部自定义样式统一存放
├── js/
│   └── script.js           # 自定义交互脚本（轮播、菜单、返回顶部等）
├── images/                 # 模板图片素材存放目录
└── html/
    ├── public/             # 全站公共复用组件
    │   ├── head.html       # 公共头部：导航、搜索、会员面板
    │   ├── foot.html       # 公共底部：友链、版权声明
    │   ├── include.html    # 全局CSS、JS统一引入文件
    │   └── paging.html     # 全站通用分页样式
    ├── index/
    │   └── index.html      # 网站首页：轮播Banner+分类影视区块
    ├── vod/                # 影视视频全套页面
    │   ├── detail.html     # 影片详情页
    │   ├── play.html       # 在线播放页
    │   ├── search.html     # 视频搜索结果页
    │   ├── type.html       # 影视分类列表页
    │   └── show.html       # 多条件筛选页面
    └── art/                # 资讯文章全套页面
        ├── detail.html     # 文章详情页
        ├── search.html     # 文章搜索页
        ├── type.html       # 资讯分类页
        └── show.html       # 资讯筛选页

模板核心功能特性

• 悬浮固定导航栏页面滚动时顶部导航自动吸顶，方便随时切换分类、搜索影片 搜索引擎
• 移动端汉堡折叠菜单屏幕宽度小于768px自动隐藏顶部导航，点击汉堡键弹出全屏导航面板
• 首页轮播Banner自动轮播切换，支持左右箭头、底部圆点切换控制主推影片
• 多档位响应式布局划分5个屏幕断点，电脑、平板、手机自动适配卡片列数与排版
• 多播放源Tab切换影片详情页多线路分组标签切换，切换无刷新
• 返回顶部悬浮按钮页面向下滚动400px自动显示，一键回到页面顶部
• 浏览历史下拉面板头部下拉展示近期观看记录，快速回访影片
• 搜索框聚焦动效点击搜索框触发高亮边框过渡动画
• CSS Grid网格布局影视卡片6列、资讯卡片3列规整排列，间距统一美观
• HTML5语义化规范全站使用header/nav/main/section/footer语义标签，利于SEO收录
• 图片懒加载支持data-original延迟加载属性，大幅降低首页加载耗时

响应式断点适配规则

模板依赖前端资源

统一开发规范

1. 文件编码统一：UTF-8 无BOM格式，避免中文乱码；
2. 强制使用HTML5语义化标签：header / nav / main / section / footer；
3. 所有自定义样式统一写在 css/style.css，不修改系统自带样式文件；
4. 页面全部自定义交互JS统一存放 js/script.js，集中维护；
5. 模板内置CMS列表调用标签仅修改num参数控制自适应卡片数量，其余系统参数保持默认不改动。

适用站点场景

适合搭建影视在线观影站、动漫资源站、剧集资讯门户、短视频合集站点，腾讯视频同款简洁商务影视UI，多端自适应搭配完善的筛选、播放、收藏、历史记录功能，开箱即用，便于二次修改配色、调整页面模块。