新闻资讯门户模板 | 时政民生专题栏目页HTML源码，jQuery轮播开箱即用

基于 HTML + CSS + jQuery 打造的新闻资讯类 PC 端门户网站模板。开箱即用，替换品牌素材即可上线。

地方资讯站、行业新闻门户、单位宣传网站的建设，工作量大头永远在列表页与专题页的排版打磨上。这套模板把新闻门户最核心的栏目页、专题页骨架连同选项卡切换、焦点图轮播等交互一并做好，编辑只需换稿换图，站点即刻成型。

模板共 4 个页面（含 1 个演示导航首页），提供时政要闻、民生、专题三类代表性栏目版式，是新闻资讯站的通用底版。

模板亮点

1. 4 个页面开箱即用

时政要闻、民生、专题三大代表性栏目页 + 演示导航首页。index.html 为模板演示导航首页，汇总全部页面入口，便于逐页预览与验收。三张栏目页共用页头页脚，克隆即可扩展出财经、军事、文化等任意栏目。

2. 新闻门户全套版式组件

• 页头：logo + 登录注册 + 分类下拉搜索框
• 主导航：10 个栏目菜单，当前栏目高亮
• 头条选项卡：鼠标悬停在头条标题间切换对应新闻组
• 图文列表 / 大图资讯列表：门户最常见的两种正文列表版式
• 侧栏：地区 / 类别 / 日期 / 价格多条件筛选、快速注册表单、头条推荐位
• 广告位：通栏广告图与底部商城推广轮播位
• 页脚：微信二维码关注、订阅下拉、友情链接、版权信息

3. 真实交互均已接通

SuperSlide 驱动的焦点图自动轮播（.slideBox）、商城推广轮播（.slideBox2）、global.js 封装的 tab 选项卡悬停切换（setTab）开箱即用，非纯静态截图式模板。

4. 专题页专属评论区版式

专题页内置评论输入框与提交按钮版式，配合专题列表与图文混排，可直接用于话题征集、事件回顾类专题。

5. 经典 PC 端门户型格

970px / 1024px / 1000px 多档定宽版心，黑体正文 + 12px 门户标准字号，信息密度与阅读节奏均为传统新闻门户规范，符合政务、媒体类客户审美。

技术栈

技术	版本	用途
HTML / CSS	—	页面结构与样式
jQuery	1.7.2	DOM 操作与交互
SuperSlide	2.1.1	焦点图 / 商品轮播
normalize.css	—	样式重置

项目结构

zww/
├── index.html        # 演示导航首页（模板入口，汇总栏目页链接）
├── 时政要闻22.html    # 时政要闻栏目页（头条选项卡 + 图文列表 + 侧栏筛选）
├── 民生22.html        # 民生栏目页
├── 专题22.html        # 专题栏目页（专题列表 + 评论区版式）
├── css/
│   ├── style.css     # 主样式（主题色在此修改）
│   └── normalize.css # 样式重置
├── js/
│   ├── global.js     # tab 选项卡等通用交互
│   ├── jquery.js     # jQuery 1.7.2
│   └── jquery.SuperSlide.2.1.1.js # 轮播插件
└── img/              # logo、新闻配图、广告图、二维码等素材

快速开始

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

# 方式一：浏览器直接打开
双击 index.html 即可通过导航页浏览全部页面

# 方式二：本地静态服务器（推荐）
cd zww
python3 -m http.server 8080
# 浏览器访问 http://localhost:8080

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

二次开发指南

需求	操作
更换品牌	替换 img/logo.jpg 与页脚二维码、版权信息
修改文案 / 链接	各 HTML 内新闻标题、摘要与 href 直接修改
更换主题色	修改 css/style.css 中的 #0a7471（导航高亮、悬停主色）
扩展栏目	复制任一栏目页 HTML，改导航高亮位置与列表内容即可
增删页面	新页面在 index.html 导航页补链接，保持演示入口完整

适用场景

地方新闻门户、行业资讯站、时政民生类媒体网站、企事业单位新闻宣传站、政务信息公开栏目页，也可作为内容型网站的列表页 / 专题页排版底版。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天上线
页面还原度	需反复打磨	门户规范版式直接交付
交互与动画	自行实现	焦点图 / 选项卡轮播已接通
适配	自行定版心	PC 端多档版心格已完成
维护成本	自行承担	纯静态无构建，改 HTML 即迭代

在线预览

将整个目录部署至 GitHub Pages / Vercel / Netlify 或任意静态托管、服务器站点根目录即可，无需构建流程。

http://case.fedshare.cn/zww/