---
description: "做严肃中文报告 / 内部简报"
---
# 报纸版 HTML 设计口味
给「审核大纲、项目复盘、内部简报」等需要严肃感的页面做的中文报纸观感模板：
暖米纸面、粗黑分割线、宋体大标题、强对比、可打印。
**靠排版建立层级，不用装饰图片、渐变、阴影、圆角。**
## 效果演示
下面是用这套设计系统拼的一个迷你「文章索引」页，把报头、栏目条、按钮、徽标、信息卡、社论摘句、空状态、三个 JS 组件（自定义下拉、复制链接、加载遮罩）串成一个活例：
试这几下：
- 顶部下拉切换类目 —— 「改值即整页提交」，加载遮罩短暂出现，筛选状态写进 URL 的 `?cat=`；列表按类目过滤，切到没有文章的类目会看到空状态卡
- 点**复制本页链接** —— 复制的是当前筛选后的完整 URL，toast 提示「链接已复制」
- 对比按钮（默认 / 实心 / 禁用）、徽标、信息卡、摘句（普通 / 反色）几种排版语言
真身在 [`assets/newspaper-demo.html`](assets/newspaper-demo.html)，样式与交互逻辑复用同级 `newspaper.css` / `newspaper.js`（同一份源文件，不重复定义，跟下面「接入方式」一致）。
## 何时用 / 何时不用
- **用**：网页文档、审核稿、长页、报告列表 / 门户、需要打印或导出 PDF 的严肃页面
- **不用**：演示页 / 滚动动画 / 投屏页面（那是另一套 16:9 舞台式风格）
## 接入方式
把本 skill `assets/` 下三个文件（css / js / favicon）拷到你的项目 `static/`：
1. `` 引入：
```html
```
2. `` 前（仅当用到 JS 组件时）：
```html
```
3. 多页项目建议做一个 Jinja `base.html` 放公共头/尾，各页 `{% extends %}` + `{% block content %}`。
## 设计系统在 `newspaper.css` 里
**设计令牌、字体、字重、分割线规则、现成类（`.page` / `.masthead` / `.kicker` / `.section-rule` / `.part` / `.core-left` / `.btn` / `.badge` / `.card` / `.no-data` 等）的完整定义和注释，都在 `newspaper.css` 里**，按章节注释组织（`---- 设计令牌 ----` / `---- 报头 ----` / `---- 区块 ----` 等）。直接读 CSS 比读 markdown 描述更准。
下面是核心骨架示例，更多见 CSS：
```html
```
## 三个 JS 组件（需引 `newspaper.js`）
全部 class 钩子驱动、无硬编码 id、有无 JS 兜底。
### 1. 自定义下拉
给原生 `