男孩世界
<style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translate(-50%, 10px); width: clamp(800px, 90vw, 1400px); height: clamp(460px, 90vh, 760px); background: #ddd url('https://638183.freep.cn/638183/t24/5/boyworld.jpg') no-repeat center/cover; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
.zw { height: clamp(460px, 90vh, 760px); margin: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2093874603" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/11/58/37/video63648dedbe3a0.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(tz);
</script>
帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translate(-50%, 10px); width: clamp(800px, 90vw, 1400px); height: clamp(460px, 90vh, 760px); background: #ddd url('https://638183.freep.cn/638183/t24/5/boyworld.jpg') no-repeat center/cover; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
.zw { height: clamp(460px, 90vh, 760px); margin: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2093874603" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/11/58/37/video63648dedbe3a0.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(tz);
</script>
本帖最后由 马黑黑 于 2025-4-4 20:31 编辑
本帖测试：音画帖居中、自适应显示设备终极大法
重点：
一、帖子设置绝对定位（position: absolute;），left 50%， transform: translate(-50%, 10px);，腾挪用上来回倒腾，实现绝对水平居中。代码在 03 行；
二、绝对定位不实际占位，会让帖子脱离文档流，这意味着帖子所在的文档流位置会坍塌，所以，非常重要的，得在其后有一个占位元素，<div class="zw"></div> 的就是，它的 CSS 设置注意观察一下，主要是 高度 height 属性设置，一般建议和帖子容器的设置为一致，或更高一些，或再使用 margin 来弥补。代码在 06 行；
三、帖子自适应显示设备，意味着帖子的实际宽度是不确定的，这要求做帖时定位子元素尽量使用百分比，或使用小尺寸设置（比如， left: 20px; right: 20px;）。至于自适应原理，请参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=82684
音乐和动图都很魔幻的。 樵歌 发表于 2025-4-4 09:23
音乐和动图都很魔幻的。
男孩世界应该如此：想象力拉满。这是创造世界的动力，是人工智能的根基。 马黑黑 发表于 2025-4-4 09:38
男孩世界应该如此：想象力拉满。这是创造世界的动力，是人工智能的根基。
是的，现在搞人工智能的都是些二十出头的年青人，以男孩居多。 樵歌 发表于 2025-4-4 18:54
是的，现在搞人工智能的都是些二十出头的年青人，以男孩居多。
DS多数开发人员都是30岁以下 我正好在使用旧电脑，发现居中非常完美，这太赞了{:4_199:} 这个.zw { height: clamp(460px, 90vh, 760px); margin: 30px; }，不是760了，而是让它自适应呢{:4_199:} 这帖子节奏很舒服，又是个让人想跳舞的节奏呢{:4_173:} 这个自适应真好，黑黑还用实例来演示的，真好{:4_187:} 红影 发表于 2025-4-4 20:11
我正好在使用旧电脑，发现居中非常完美，这太赞了
这个不论新旧 红影 发表于 2025-4-4 20:12
这个.zw { height: clamp(460px, 90vh, 760px); margin: 30px; }，不是760了，而是让它自适应呢
反正就是和帖子容器一样就好 红影 发表于 2025-4-4 20:13
这帖子节奏很舒服，又是个让人想跳舞的节奏呢
青春的样纸 马黑黑 发表于 2025-4-4 20:31
这个不论新旧
正好过节出来了，懒得来回带电脑，就用了放在这的。显示一样很好{:4_187:} 马黑黑 发表于 2025-4-4 20:32
反正就是和帖子容器一样就好
这个是保准配置的呢{:4_187:} 马黑黑 发表于 2025-4-4 20:32
青春的样纸
好的节奏感觉有魔力的{:4_173:} 红影 发表于 2025-4-4 22:31
好的节奏感觉有魔力的
有道理 红影 发表于 2025-4-4 22:29
这个是保准配置的呢
避免出现帖子坍塌的保障 红影 发表于 2025-4-4 22:28
正好过节出来了，懒得来回带电脑，就用了放在这的。显示一样很好
笔记本吧