html - HTML5 开始屏幕图像在屏幕上的位置

Question

我正在制作一个开始屏幕，我有一个充当按钮的图像，我完全忘记了如何将它放在页面上我想要的位置。

<div id="SplashScreen" width="400" height="400">
    <h1>Game Title</h1>
    <img id="StartButton" src="play.png"/>
</div>

我如何将它放置在屏幕上我想要的位置？我不介意它是如何编码的，因为我知道

顺便说一句，我是 html 新手，所以请原谅我的菜鸟问题 :)

Answer 1

在 html 中有几种主要的方式来定位内容。
以下是定位内容的所有不同方式的链接：http: //www.w3schools.com/css/css_positioning.asp

实际上，启动屏幕最常见的方式可能是绝对定位。

<div id="SplashScreen" width="400" height="400" style="position:absolute; top:0; left:0; z-index:100;">
    <h1>Game Title</h1>
    <img id="StartButton" src="play.png"/>
</div>

这会将启动画面定位在浏览器的左上角。top:0 将使其距顶部 0 个单位，left:0 将使其距左侧 0 个单位。如果你想调整这些，你可以这样做，但记得添加单位，如 top:400px;

我还添加了一个 z-index，这样它就会出现在页面上任何其他内容的顶部。

最后一件事，就像一个注释，你应该使用类而不是样式来定位。这更容易维护。

<style>
.splashScreen {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:400px;
    height:400px;
}
</style>

将是类并使用它，你可以用这个替换你所拥有的：

 <div id="SplashScreen" class="splashScreen">
    <h1>Game Title</h1>
    <img id="StartButton" src="play.png"/>
</div>  

正如上面的评论所提到的，这是为了让你开始，如果你想让它位于屏幕的中心，或者相对于其他东西，你必须对类进行调整。

GL！