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

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

全屏

虚拟机中已经提供了index.htmlstyle.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 教程