如何創建全屏網站設計？

我想要實現的是這樣的：http://www.svkariburnu.com/，我不知道是否應該在我的css中只使用％作爲我的值，或者有更多的值，我想要做的是創建例如一個菜單的寬度是相同的窗口，如何創建全屏網站設計？

我試過已經使用％的元素和它的工作，但我怎麼知道確切的百分比來設置剩餘值，我希望他們是什麼？

我看了一下，發現有人用js來達到這個目的，那有必要嗎？

這是我到目前爲止的代碼：

HTML：

<div id="wrapper"> 

<div id="banner"></div> 

<div id="menu"> 

<div id="buttom"></div> 
<div id="buttom"></div> 
<div id="buttom"></div> 
<div id="buttom"></div> 
<div id="buttom"></div> 


</div> 

<div id="iframe"></div> 

</div>

CSS例子：

body{ 
     background:#f7f7f7 url(../images/pattern.png) repeat top left; 
     color:#000; 
     font-family:'Georgia', 'Trebuchet MS', serif; 
     font-size:12px; 
    } 

    #wrapper{ 
     width:100%; 
     height:900px; 
     margin:auto; 
    } 

    #banner{ 
     width:100%; 
     height:200px; 
     float:left; 
     background-color:#333 
    } 

    menu{ 
     width:100%; 
     height:50px; 
     float:left; 
    } 

    #buttom{ 
     width:20%; 
     height:50px; 
     float:left; 
     background-color:#063; 
    }

它的工作，但現在的iframe我不知道如何將其設置在中間我不希望iframe是全角，我需要它在80％，每邊10％免費，等等，我怎麼能管理呢？有沒有這個教程？

在此先感謝！

來源

2013-11-04 Thrice89

你應該嘗試閱讀一些關於響應式網站和媒體查詢的文章，它至少會給你一些啓動。 – drip

@drip會做，但每次我找到一篇文章只關於響應網站的重要性永遠不能如何做到這一點，將需要更深入地看，謝謝！ – Thrice89

只要使用這個，無論發生什麼，總會在每一邊都有間距;

#wrapper{ 
     width:100%; 
     height:900px; 
     margin:auto; 
     padding:0 20px 0 20px; 
    }

來源

2013-11-04 21:29:53 Luke14

這將使包裝百分之百的窗口寬度，它會將它向右推20px ...所以只會在左側有空格，右側會被隱藏20px。 – drip

對不起，我已經添加了填充，所以無論是在包裝現在將有一個20px的左右間距與包裝仍然佔用100％ – Luke14

不，它仍然是相同的。它將採用+ 40px的窗口的100％。爲了像這樣工作，你應該添加框尺寸：邊框; – drip

首先，ID爲「底部」的<div>元素，使用class="bottom"代替。

對於<div id="iframe">，您可以嘗試使用width:80%; margin:auto;，看看是否給你想要的效果。

來源

2013-11-04 21:31:13

感謝您的建議，但是當我改變div類的div類我不能再看到我的菜單，對不起，我不習慣課程，除非它是文本，我仍然有菜單{widht：100％，height：50px; float：left;}然後.button {width：20％，height：50px;向左飄浮; background-color：＃063}它是我應該做的唯一改變還是我做錯了什麼？ – Thrice89

是的，應該沒問題。它一定是別的錯誤。如果你不介意嘗試創建一個jsFiddle並在你的問題中發佈鏈接，以便人們可以更輕鬆地幫助你。 –

啊是啊...我發現這是一個語法錯誤的問題。它現在工作，感謝您的幫助:) – Thrice89

獲取有關寬度實況視覺體驗：

火狐 - >獲得螢火 - >右擊 - > Firebug的檢查元素
瀏覽器 - >右擊 - > InspectElement

現在您可以選擇左側的html元素並獲取右側的css部分。此時您可以點擊n％（例如100％）並使用向上和向下鍵來更改它。

來源

2013-11-04 21:36:06 user2693017

如果您希望自己的頁面基於視口大小，則可能需要viewport units。請小心使用它們，they may not be supported在您正在開發的瀏覽器中。

所以，如果你需要一個尺寸爲視口80％的元素，你可以在你的css中添加width: 80vw。同樣，如果您需要10％，如果在每邊的空間視口，您可以添加margin: 0 10vw;。（其實，讓利潤率可能更好，margin: 0 auto;）

來源

2013-11-04 21:41:55 uber5001

如何創建全屏網站設計？

回答

相關問題