像FB和類似網站的css和頁面佈局

-3

ANyone知道如何使用css + html定義類似於FB的佈局的好教程嗎？像FB和類似網站的css和頁面佈局

我正在尋找一個很好的例子，如何有一個100％的標題，然後是一個約700px寬的身體的中間列，每邊有一列。

更新：

我不想用div來理解CSS佈局。只是試圖看看是否有一種方法或常見的方法來做到這一點

我有興趣知道（使用FB作爲exmaple）..他們如何能夠有這些水平背景，然後讓他們的內容排隊在三列或中間排列。

來源

2012-04-17 Arcadian

http://twitter.github.com/bootstrap/ – 2012-04-17 18:46:06

這真是小巫見大巫，如果你不」不知道如何佈置CSS然後學習它。特定於特定佈局的教程，真的嗎？ – 2012-04-17 18:48:22

我只是好奇，如果我正確地做，並看到其他設計師是如何做到這一點.. – Arcadian 2012-04-17 18:59:41

下面是HTML：

<html> 
<head> 
<link rel="styleSheet" href="style.css" type="text/css"> 
</head> 
<body> 
    <div id="header">Hello</div> 
    <div id="sidebar">Sidebar</div> 
    <div id="content">Content</div> 
    <div id="sidebar-right">Right</div> 
</body> 
</html>

，這是CSS：

body, html{ 
    width:  100%; 
    height:  100%; 
    margin:  0; 
    padding: 0; 
} 

#header{ 
    width:  100%; 
padding-left: 200px; 
    height:  50px; 
    background: #0000FF; 
} 

#sidebar{ 
    float:  left; 
    width:  200px; 
    height:  100%; 
    background: #FF0000; 
} 

#content{ 
    float:  left; 
    width:  700px; 
    height:  100%; 
    background: #00FF00; 
} 

#sidebar-right{ 
    margin-left:900px; 
    height:  100%; 
    background: #FFFF00; 
}

來源

2012-04-17 18:53:20 James

@ magic-c0d3r我已經更新了代碼，以便發生這種情況。 – James 2012-04-17 18:57:51

如果我希望標題中的內容與主體中的內容對齊，我是否需要在標題中添加一個div並將magin設置爲auto？ – Arcadian 2012-04-17 18:58:16

@ magic-c0d3r我已經通過在200px的標題div中添加了一個填充，這是側邊欄的大小來解決此問題。 – James 2012-04-17 18:59:21

首先定義一個包裝類，它是你希望你的頁面的寬度。將它的邊距設置爲auto（至少在左側和右側），以便它將在頁面中居中。你說700px，所以：

.wrapper 
{ 
    width: 700px; 
    margin: auto; 
}

現在你需要你的三列，一個在中間，一邊在一邊。假設左側和右側是不一樣的大小（只是爲了把事情說清楚），做這樣的事情：

#left 
{ 
    width: 100px; 
    float: left; 
} 

#middle 
{ 
    width: 400px; 
    float: left; 
} 

#right 
{ 
    width: 200px; 
    float: left; 
}

現在增加100％的寬頭：

#header 
{ 
    width: 100%; 
}

，你可以設置你的頁面，如下所示：

<div id="header"> 
    <div class="wrapper"> 
     Your header here 
    </div> 
</div> 
<div class="wrapper"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"></div> 
</div>

下面是這個例子在每個格任意背景顏色，所以你可以看到，他們是：

http://jsfiddle.net/grwjy/

這只是一個簡單的例子，但希望能讓您走上正確的軌道。

來源

2012-04-17 18:50:56

像FB和類似網站的css和頁面佈局

回答

相關問題