首頁 > Html > 將歡迎頁內容上下左右置中

將歡迎頁內容上下左右置中

2011年11月3日     發表評論 閱讀評論
如果這篇文章有幫助到,請大方的給個讚+1!

製做歡迎頁的時候,常常有些問題會困擾就是如何將我要呈現的東西(歡迎頁)擺在最中央,又不受螢幕解析度的影響?

一般我們會預設1024×768為呈現的解析度,但寬螢幕越來越多,多少就會有跑掉的問題,這問題我也很頭痛,但目前我的做法是利用table來實做,畢竟table比較好上手,至於為什麼要放這張金魚的圖呢?單純是因為好看罷了,哈!

首先我先將程式碼給大家看看:

<table style="position: absolute; height: 100%;" width="100%" border="0″>
<tbody>
<tr align="center">
<td><img style="text-decoration: none;" src="IMG_3542.JPG" alt="" align="absmiddle" /></td>
</tr>
</tbody>
</table>

看得懂程式碼的看程式碼,看不懂程式碼的看這邊,最簡單的方法就是將你看到的img tag換成你要放的東西,這邊我是在歡迎頁放了一張圖,但是記得他的屬性別把它拿掉了。
text-decoration:none是為了不讓文字超連結有底線,align="absmiddle",很明白的是要他置中
當你把內容(歡迎頁)放上去之後,你會發現,假如你的圖太大張他會出現X軸跟Y軸的捲軸,這時候就要再另用CSS去將他隱藏起來

overflow-x:hidden;
overflow-y:hidden;

如此一來就大功告成了,你的歡迎頁就會很安分的上下左右置中。當你縮放你的瀏覽器時,歡迎頁的內容也會隨著瀏覽器的大小而有所改變!

 


如果文章有幫助到您,請不吝的給本站贊助,任何的鼓勵都是分享的動力!

Categories: Html Tags:
  1. 目前尚無任何的評論。
  1. 目前尚無任何 trackbacks 和 pingbacks。