Question

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

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

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

BTW我是html的新手，所以请原谅我的noob问题：）

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个单位，左：0将使其从左侧开始为0个单位。如果您想调整这些，可以这样做，但请记住添加单位，如上图：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！

HTML5开始屏幕图像放置在屏幕上

1 个答案: