暴风游戏实现补充记录

• 背景---简单+
• 头部---简单
• 内容---简单
• 尾部---简单

---

背景视屏布局脱离文档流；
宽高适应屏幕： object-fit: cover;
定位流（绝对定位）居中常用方案：

      position:absolute;
      left:50%;
      transform: translateX(-50%);

      position:absolute;
      left:50%;
      margin-left: - 当前盒子宽度的一半；

视频难点：兼容问题
格式：

      <video>
        <source src="./images/bg.mp4" type="video/mp4">
        <source src="./images/bg.webm" type="video/webm">
          <source src="./images/bg.ogg" type="video/ogg">
      </video>

video参数：

autoplay：自动播放；

loop：循环播放；

poster：占位图片；

muted：静音；

controls：控制条；

preload：预加载（与aotuplay不能同时使用）

总结

此页面属于简单应用；能很好的掌握定位流相关属性；

最终一句话：子绝父相；