HTML5開始屏幕在屏幕上的圖像放置

我正在做一個開始屏幕，我有一個圖像充當按鈕，我完全忘了如何將它放在頁面上我想要的位置。HTML5開始屏幕在屏幕上的圖像放置

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

我該如何把這個地方放在屏幕上？我不介意它是如何編碼的，因爲我知道

BTW我是新來的HTML，所以請原諒我的小白問題:)

來源

2012-10-12 corrigan_sam

_我如何將它放在屏幕上我想要的地方？_ - 這裏沒有人能讀懂你的想法。你想在屏幕上的哪個位置？ –

這並不重要，我想要的地方，我問如何把它放在一些地方，你可以把任何價值的代碼。 –

那麼取決於你想要它和你的網頁的其餘部分的內容，答案可能會完全不同... –

在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單位。如果你想調整這些，你可以這樣做，但記得添加單位，如頂部：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！

來源

2014-05-11 14:55:11 nycynik

HTML5開始屏幕在屏幕上的圖像放置

回答

相關問題