使用tzMaker发图音文帖方法

马黑黑 · 发表于 2025-10-27 12:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

此前演示tzMaker发表图文帖时，发现配套的CSS样式缺少了一些基本的图文设计，做文本帖得额外设置对应选择器，不很方便。因此，我在 tz.css 文档中加入了几个相关选择器，供图文帖选用，如下：

/* 一、tz.css新增选择器 */ .wz { ... } - 图文帖容器 .tRight { ... } - inline-block对象右对齐 .tMid { ... } - inline-block对象居中 .rMid { ... } - block对象居中 .gMid { ... } - grid布局强制子元素绝对居中 /* 二、HTML代码使用选择器举例： */ <div id="article" class="wz"> <h1 class="tMid">文章标题</h1> <p>文章段落一</p> <p>文章段落二</p> <p>文章段落三</p> <p class="tRight">年月日盖章</p> </div>

以上是伪代码，解释说明之用，不是tzMaker发布图文帖的最终范例。使用上述CSS选择器发图文帖具体做法应如下所示（可以预览效果，但因缺少媒体资源效果不佳）：

上面的代码分成三部分：

第一部分：css（1~6行）

@import 语句引入配套样式表资源
.wz 是配套样式表资源同名选择器，可以在此做一些个性化设置
.jdt 和 .bfq 是自定义选择器，分别用来装载进度条和播放器

第二部分：html（第八行）

就一个帖子容器标签，id 和 class 同名

第三部分：js（10~30行）

步骤一：导入 js 模块、声明制帖对象变量 tz（代码 11、12 行）；
步骤二：准备文档结构和内容（代码 14~24行），变量名 text 可以是别的。其中的两个 div 标签用于安排小播和进度条。两个 div 于何位置根据自己的设计选择；
步骤三：分别使用对应的tz指令 text()、add()、bgprog() 输出特定内容，text() 指令输出富文本，两个 add() 指令输出音频和小播图片，bgprog() 指令输出进度条。个别指令还有链式调用tz的其它指令，比如 to() 指令，将播放器、进度条放置到对应的 div 元素。

当然，小播、进度条不一定非得放在预设的 div 中，像此前演示的那样也未尝不可。怎么安排，取决于个人设计偏好。

tzMaker模块主攻音画帖，这不等于说它在图文排版方面弱智，一切美好的可能都可能成为可能的存在，一切等候你神圣的召唤。