男孩世界

马黑黑 · 发表于 2025-4-4 09:04

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

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

x

马黑黑 · 发表于 2025-4-4 09:05

帖子代码：

<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 09:16

本帖最后由马黑黑于 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