以圖例方式介紹CSS制作網頁詳細步驟

2024-07-11 08:44:01

字體：大中小

來源：轉載

供稿：網友

首先要做的是確定頁面結構。隨著你對CSS布局的逐步學習，這個過程會變得越來越簡單。通過運用大量絕對定位和大幅背景圖片，我們可以非常簡單地完成這個設計。
第一步
下面是我們將要動手制作的設計圖。如前所述，你可以閱讀 PSDTUTS上的這篇教程來學習如何做出這樣的設計圖。在這篇教程里我們只制作首頁，不過你可以以此為基礎用相同的布局制作內頁。

第二步
首先要做的是確定頁面結構。隨著你對CSS布局的逐步學習，這個過程會變得越來越簡單。通過運用大量絕對定位和大幅背景圖片，我們可以非常簡單地完成這個設計。
什么是絕對定位？
一個HTML元素（比如<div>、等等）被放入頁面時具有一個天生的位置，這個位置是由之前放入的元素確定的。例如，你放入一個填充了文字的標簽，接著放入另一個，它會自然出現在第一個下方。每個元素相對于上一個元素流動。
絕對定位則不同，它給一個對象指定精確的位置使它脫離常規的元素流。如果你像之前一樣放入第一個，然后絕對定位第二個為 left:500px; top:500px，那它就會無視第一個準確無誤地出現在指定的位置。
你可以像這樣設置絕對定位：
.className {

position:absolute;
top:0px;
left:0px;

}
絕對定位的缺點
使用絕對定位的主要問題是你的元素們不會真正地相互關聯。例如，你在靠近頁面頂端的地方放置了一個文本塊，然后稍靠下放置另一個，當每一個塊的文本都較短時這看上去很好。但如果頂部的塊內是一篇長文，它就會越過第二個塊，而不是把第二個塊推向下方。
所以絕對定位只對那些尺寸固定并且不需要與其他元素互動的元素真正有效。
為什么本例中我們要用絕對定位？
因為絕對定位的好處就在于，它真的、真的非常簡單！你告訴瀏覽器東西往哪兒放它就往哪兒放！更棒的是，當你使用絕對定位時，瀏覽器兼容性問題會大大減少。畢竟不管你用的是Firefox、Internet Explorer還是Safari，100px總歸是100px。
嗯...該開始我們的布局了
我們將要制作網站的方法是：使用大尺寸的背景圖片絕對定位Logo、菜單和頭部面板，讓它們精確地出現該出現的地方將content（內容）放入慣用的<div>標簽，但設置很高的padding-top（頂部內邊距）好讓content向下推到該出現的地方讓footer（頁腳）坐鎮底部
如果上述說明還不能讓你有一個整體的感覺，先別著急，當你看到網站成型的時候就會了解了！