CSS 全屏元素样式设置 | 网页开发

简介

在本实验中，我们将探索如何使用:fullscreen CSS 伪元素选择器，在元素处于全屏模式时为其应用样式。我们将使用Element.requestFullscreen()创建一个按钮，以使元素进入全屏模式，用于预览样式。完成本实验后，你将更好地理解如何使用 CSS 创建具有自定义样式的全屏元素。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

全屏

虚拟机中已经提供了index.html和style.css。

要对处于全屏模式的元素设置样式，你可以使用:fullscreen CSS 伪元素选择器。你还可以创建一个按钮，通过<button>和Element.requestFullscreen()使元素进入全屏模式以进行预览。以下是一个示例代码：

<div class="container">
  <p>
    <em>点击下方按钮可使元素进入全屏模式。</em>
  </p>
  <div class="element" id="element">
    <p>我在全屏模式下会改变颜色！</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    进入全屏！
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* 针对 Internet Explorer */
.element:-ms-fullscreen p {
  visibility: visible;
}

/* 针对现代浏览器 */
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“全屏”实验。你可以在 LabEx 中练习更多实验以提升你的技能。

使用 CSS 进行全屏元素样式设置

简介

全屏

总结