此前演示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选择器发图文帖具体做法应如下所示（可以预览效果，但因缺少媒体资源效果不佳）：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.css?v1';
.wz { color: darkred; background: beige; max-width: 1000px; } /* 设置文章容器背景、字体等，可缺省 */
#jdt { height: 80px; } /* 进度条容器，它将配合 .gMid {} 使用，令进度条居中 */
#bfq { height: 40px; } /* 播放器容器，它将配合 .Mid {} 使用，令播放器居中 */
</style>
<div id="wz" class="wz"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
const tz = TZ.TZ('pa');
var text = `
<h1 class="tMid">文章标题</h1>
<p class="tMid">作者 ：谁谁谁</p>
<p class="tMid"><img alt="配图" src=" 图片地址" /></p>
<p>文章段落一</p>
<p>文章段落二</p>
<p>文章段落三</p>
<p class="tRight">年月日签章/手印</p>
<div id="bfq" class="tMid"></div>
<div id="jdt" class="gMid"></div>
`;
tz.text(text, 'wz');
tz.add('audio', '', '', {src: ' MP3地址'});
tz.add('img', '', '', {src: ' 小播图片地址', style: 'width: 80px'}).to(bfq).playmp3();
tz.bgprog().to(jdt);
</script>
上面的代码分成三部分：
第一部分 ：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模块主攻音画帖，这不等于说它在图文排版方面弱智，一切美好的可能都可能成为可能的存在，一切等候你神圣的召唤。
|
发表于