如何使用CSS定位來創建沒有表格的佈局

無表佈局打開新的設計前沿

很多原因不使用表格進行佈局 。 人們繼續使用它們的最常見原因之一是因為使用CSS進行佈局很困難。 儘管CSS腳本確實需要一條學習曲線,但當您了解如何進行CSS佈局時,您可能會對它的容易程度感到驚訝。 一旦你了解到了,你將解決人們不使用CSS的第二個常見原因 - “寫入表格更快”。它更快,因為你知道表格,但是一旦你學習了CSS,你可能會快接著就,隨即。

瀏覽器支持CSS定位

所有現代瀏覽器都支持CSS定位。 除非您正在為Netscape 4或Internet Explorer 4構建網站,否則讀者不應該在查看CSS定位的網頁時遇到任何問題。

反思你如何建立一個頁面

當您使用表格構建網站時,您必須以表格格式來思考。 換句話說,你正在考慮單元格,行和列。 您的網頁將反映這種方法。 當您轉向CSS定位設計時,您會開始考慮內容方面的內容,因為內容可以放置在佈局的任何位置,甚至可以放在其他內容的頂層。

不同的網站有不同的結構。 要構建一個有效的頁面,請在為其分配內容之前評估任何給定頁面的結構。 示例頁面可能包含五個不同的部分:

  1. 標題 。 橫幅廣告,網站名稱,導航鏈接,文章標題以及一些其他內容的主頁。
  2. 右欄 。 這是搜索框,廣告,視頻框和購物區的頁面右側。
  3. 內容 。 文章,博客文章或購物車的文本 - 頁面的肉和土豆。
  4. 內嵌廣告 。 內容內嵌的廣告。
  5. 頁腳 。 底部導航,作者信息,版權信息,較低的橫幅廣告和相關鏈接。

而不是將這五個元素放在一個表中,使用HTML5切片元素來定義內容的不同部分,然後使用CSS定位將內容元素放置在頁面上。

識別您的內容部分

在定義了網站的不同內容區域之後,您需要將它們寫入HTML。 雖然通常可以按照任意順序放置部分,但首先放置頁面最重要的部分是一個好主意。 這種方法也有助於搜索引擎優化。

為了演示定位,設想一個包含三列但沒有頁眉或頁腳的頁面。 您可以使用定位來創建您喜歡的任何類型的佈局。

對於三列佈局,定義三個部分:左列,右列和內容。

這些部分將使用內容的ARTICLE元素和兩列的兩個SECTION元素進行實例化。 一切都會有一個屬性來識別它。 當你使用id屬性時,你必須為每個id賦予一個唯一的名字。

定位內容

使用CSS,為您的ID'd元素定義位置。 將您的位置信息存儲在如下所示的樣式調用中:

#content {

}

這些元素中的內容將佔用盡可能多的空間,即當前位置或頁面寬度的100%。 要影響某個部分的位置而不強制為固定寬度,請更改填充或邊距屬性。

對於此佈局,將兩列設置為固定寬度,然後將它們的位置設置為絕對,以便它們不會受到HTML中找到的位置的影響。

#left-column {
位置:絕對;
左:0;
寬度:150px;
margin-left:10px;
margin-top:20px;
顏色:#000000;
填充:3px;
}
#右欄{
位置:絕對;
左:80%;
top:20px;
寬度:140px;
padding-left:10px;
z-index:3;
顏色:#000000;
填充:3px;
}

然後對於內容區域,將右側和左側的邊距設置為使內容不會與兩個外側列重疊。

#content {
top:0px;
margin:0px 25%0 165px;
填充:3px;
顏色:#000000;
}

使用CSS而不是HTML表格定義頁面需要更多的技術技能,但是回報則來自更靈活和響應式設計,並且稍後可以更輕鬆地對頁面進行結構調整。