马黑黑 发表于 2025-10-27 12:58

tzMaker发文章再演示

本帖最后由 马黑黑 于 2025-10-27 17:52 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.css?v1';
        .wz {
                color: navy;
                background: url('https://638183.freep.cn/638183/small/webp/bg01.webp') no-repeat 0 0/100% 100%;
        }
        .wzh2 { font-size: 30px; }
        .wz p:not() { text-indent: 2em; }
        #player { height: 80px; }
        #progress { height: 40px; }
</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(wz);

        const text = `
<h2 class="tMid">冰 霜 花</h2>
<p class="tMid">作者：佚名</p>
<p class="tMid"><img width="450" src="https://img95.699pic.com/photo/60102/6404.jpg_wh300.jpg" alt="" /></p>
<div id="player" class="tMid"></div>
<div id="progress" class="gMid"></div>
<p>如果说有什么是留在记忆中的挥之不去的，使人印象深刻的，我会说有很多，但时常显现在脑海里的，便是冬季姥姥家窗户玻璃上的冰霜花，那是承载了我整个童年冬日为数不多有趣事情的记忆。</p>
<p>每日早晨初醒，不必急于晨美文网起，第一件事就是拉开窗帘，看着形态各异的冰霜花，不由得感叹大自然的鬼斧神工，这些冰霜花，真的是一个奇迹，冬日每天出现，却不重复，千奇百怪，看着它们，不禁觉得自己的想象力太贫乏，像争奇斗艳的花、像穿古装的少女、像天边的宫殿……</p>
<p>儿时的我，总会在看完冰霜花后留下自己的足迹，用手指的的温度在玻璃上描绘心中的图案，比如画只可爱的小兔子，画些刚刚发芽的小草，画一座巍峨的山峰……凑上前去，轻吹一口气，冰霜花随着热气散开，向四周散去，多么美妙有趣。直到太阳出来，冰霜花渐渐地全部融化。第二天，依旧能够在玻璃上看到他们的身影，每天都是千变万化的。</p>
<p>冰霜花虽然不是真正意义上的花，它们不像鸡冠花、月季、玫瑰一样绚丽多彩，没有五颜六色，没有沁人心脾的花香，也没有绿叶的衬托。没有鲜花的冬天是显得格外萧瑟，凛冽的寒风呼呼的吹着，院子里的花都禁不住寒风的侵袭，纷纷落叶了。移步向户外走去，树枝上已经凝结上一层白白的冰霜花，银装素裹，格外耀眼。</p>
<p>田野里、村庄的屋瓦上也都落了一层霜，尽管如此，奇妙的冰霜花还是为冬日增添了不少诗意，它们是从寒冷的一步步走来的，有过一段艰难的历程，是水汽与寒冷的相遇，晶莹剔透，洁白无瑕，用自己独特的美装饰着这个静谧的冬季。</p>
<p>长大之后，鲜少有机会再看到窗上的冰霜花了，家家户户的都安装了暖气，如今的冬天也没有小时候的寒冷了，可窗上的冰霜花一直印在我的脑海里，它是那样干净、纯粹，是大自然制造的奇迹。</p>
<p>冰霜花，赋予了我很多启示，只有经历一番严寒的洗礼，才会迎来明媚的春天。他们把自己的一生奉献给了整个冬季，助庄稼积蓄能量，使秋季能有个好收成。就像人一样，只有经过艰苦的磨练，生命才会变得更加顽强，也希望我们像冰霜花一样，无论身处何时何地，都能默默地悄然开放。</p>
<p class='tRight'>二〇二五年十月二十七日</p>
`;

        tz.text(text, wz);
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=535331509'});
        tz.add('img', '','rot-ani', {
                src: 'https://638183.freep.cn/638183/small/snow.webp',
                style: 'width: 80px',
                alt: '小播'
        }).to(player).playmp3();
        tz.bgprog().to(progress);
</script>

马黑黑 发表于 2025-10-27 13:01

本帖最后由 马黑黑 于 2025-10-27 17:53 编辑

一楼代码

<style>
      @import 'https://638183.freep.cn/638183/web/tz/tz.css?v1';
      .wz {
                color: navy;
                background: url('https://638183.freep.cn/638183/small/webp/bg01.webp') no-repeat 0 0/100% 100%;
      }
      .wzh2 { font-size: 30px; }
      .wz p:not() { text-indent: 2em; }
      #player { height: 80px; }
      #progress { height: 40px; }
</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(wz);

      const text = `
<h2 class="tMid">冰 霜 花</h2>
<p class="tMid">作者：佚名</p>
<p class="tMid"><img width="450" src="https://img95.699pic.com/photo/60102/6404.jpg_wh300.jpg" alt="" /></p>
<div id="player" class="tMid"></div>
<div id="progress" class="gMid"></div>
<p>如果说有什么是留在记忆中的挥之不去的，使人印象深刻的，我会说有很多，但时常显现在脑海里的，便是冬季姥姥家窗户玻璃上的冰霜花，那是承载了我整个童年冬日为数不多有趣事情的记忆。</p>
<p>每日早晨初醒，不必急于晨美文网起，第一件事就是拉开窗帘，看着形态各异的冰霜花，不由得感叹大自然的鬼斧神工，这些冰霜花，真的是一个奇迹，冬日每天出现，却不重复，千奇百怪，看着它们，不禁觉得自己的想象力太贫乏，像争奇斗艳的花、像穿古装的少女、像天边的宫殿……</p>
<p>儿时的我，总会在看完冰霜花后留下自己的足迹，用手指的的温度在玻璃上描绘心中的图案，比如画只可爱的小兔子，画些刚刚发芽的小草，画一座巍峨的山峰……凑上前去，轻吹一口气，冰霜花随着热气散开，向四周散去，多么美妙有趣。直到太阳出来，冰霜花渐渐地全部融化。第二天，依旧能够在玻璃上看到他们的身影，每天都是千变万化的。</p>
<p>冰霜花虽然不是真正意义上的花，它们不像鸡冠花、月季、玫瑰一样绚丽多彩，没有五颜六色，没有沁人心脾的花香，也没有绿叶的衬托。没有鲜花的冬天是显得格外萧瑟，凛冽的寒风呼呼的吹着，院子里的花都禁不住寒风的侵袭，纷纷落叶了。移步向户外走去，树枝上已经凝结上一层白白的冰霜花，银装素裹，格外耀眼。</p>
<p>田野里、村庄的屋瓦上也都落了一层霜，尽管如此，奇妙的冰霜花还是为冬日增添了不少诗意，它们是从寒冷的一步步走来的，有过一段艰难的历程，是水汽与寒冷的相遇，晶莹剔透，洁白无瑕，用自己独特的美装饰着这个静谧的冬季。</p>
<p>长大之后，鲜少有机会再看到窗上的冰霜花了，家家户户的都安装了暖气，如今的冬天也没有小时候的寒冷了，可窗上的冰霜花一直印在我的脑海里，它是那样干净、纯粹，是大自然制造的奇迹。</p>
<p>冰霜花，赋予了我很多启示，只有经历一番严寒的洗礼，才会迎来明媚的春天。他们把自己的一生奉献给了整个冬季，助庄稼积蓄能量，使秋季能有个好收成。就像人一样，只有经过艰苦的磨练，生命才会变得更加顽强，也希望我们像冰霜花一样，无论身处何时何地，都能默默地悄然开放。</p>
<p class='tRight'>二〇二五年十月二十七日</p>
`;

      tz.text(text, wz);
      tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=535331509'});
      tz.add('img', '','rot-ani', {
                src: 'https://638183.freep.cn/638183/small/snow.webp',
                style: 'width: 80px',
                alt: '小播'
      }).to(player).playmp3();
      tz.bgprog().to(progress);
</script>

偶然~ 发表于 2025-10-27 13:01

这个完美漂亮

马黑黑 发表于 2025-10-27 13:02

论坛对 h1、h2 等标题标签做了设置，所以补上了 07 行代码

偶然~ 发表于 2025-10-27 13:03

可以把播放器放在后面吗？

马黑黑 发表于 2025-10-27 13:03

相关说明：https://www.huachaowang.com/forum.php?mod=viewthread&tid=87355&extra=page%3D1

马黑黑 发表于 2025-10-27 13:04

偶然~ 发表于 2025-10-27 13:03
可以把播放器放在后面吗？

这是随意的，你去看看这个，说明很详细：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=87355&extra=page%3D1

马黑黑 发表于 2025-10-27 13:14

偶然~ 发表于 2025-10-27 13:03
可以把播放器放在后面吗？

这是放后面的排版方式：

http://mhh.52qingyin.cn/art/bshow.php?st=2&sd=2&art=mahei_1761541748

杨帆 发表于 2025-10-27 13:23

挺好，更加规范、美观、实用，马老师您辛苦了{:4_176:}

偶然~ 发表于 2025-10-27 13:25



可以把这个放在后面吗？

偶然~ 发表于 2025-10-27 13:26

马黑黑 发表于 2025-10-27 13:14
这是放后面的排版方式：

http://mhh.52qingyin.cn/art/bshow.php?st=2&sd=2&art=mahei_1761541748

谢谢啦

偶然~ 发表于 2025-10-27 13:28

马黑黑 发表于 2025-10-27 13:14
这是放后面的排版方式：

http://mhh.52qingyin.cn/art/bshow.php?st=2&sd=2&art=mahei_1761541748

播放器放在文字后日期前，

梦江南 发表于 2025-10-27 14:03

谢谢黑黑老师，这帖很实用。辛苦了！{:4_190:}

寒冬残荷 发表于 2025-10-27 14:15

点赞！很实用！

不知道是不是我的浏览器的问题？加分后帖子页面跳转。

红影 发表于 2025-10-27 15:21

这个有首行缩进了，更漂亮了。{:4_199:}
好像首行缩进也影响了“作者：佚名”这行文字，已经帖子中插入的图片呢，让它们也按缩进朝右了。

红影 发表于 2025-10-27 15:26

这张底图选得真好，特别适合做文字帖子呢，插图和小播也漂亮，都和文字内容很协调呢{:4_199:}

偶然~ 发表于 2025-10-27 17:22

马黑黑 发表于 2025-10-27 13:04
这是随意的，你去看看这个，说明很详细：

https://www.huachaowang.com/forum.php?mod=viewthread&tid ...

看了，非常感谢

偶然~ 发表于 2025-10-27 17:23

马黑黑 发表于 2025-10-27 13:14
这是放后面的排版方式：

http://mhh.52qingyin.cn/art/bshow.php?st=2&sd=2&art=mahei_1761541748

很好，感谢马老师精彩的代码

马黑黑 发表于 2025-10-27 17:46

偶然~ 发表于 2025-10-27 17:23
很好，感谢马老师精彩的代码

客气客气

马黑黑 发表于 2025-10-27 17:46

偶然~ 发表于 2025-10-27 17:22
看了，非常感谢

{:4_191:}
页: [1] 2 3 4 5
查看完整版本: tzMaker发文章再演示