CSS 網站布局
網站布局
網站通常分為頁眉、菜單、內容和頁腳：
有很多不同的布局設計可供選擇。但是，以上結構是最常見的結構之一，我們將在本教程中對其進行仔細研究。
頁眉
頁眉（header）通常位于網站頂部（或頂部導航菜單的正下方）。它通常包含徽標（logo）或網站名稱：
實例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
結果：
導航欄
導航欄包含鏈接列表，以幫助訪問者瀏覽您的網站：
實例
/* navbar 容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar 鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 懸停時改變顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
結果：
內容
使用哪種布局通常取決于您的目標用戶。最常見的布局是以下布局之一（或將它們組合在一起）：
- 1-列布局（通常用于移動瀏覽器）
- 2-列布局（通常用于平板電腦和筆記本電腦）
- 3-列布局 （僅用于臺式機）
1-列：
2-列：
3-列：
我們將創建 3 列布局，并在較小的屏幕上將其更改為 1 列布局：
實例
/* 創建三個相等的列，它們彼此相鄰浮動 */
.column {
float: left;
width: 33.33%;
}
/* 在列后清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應式布局 - 使三列堆疊，而不是在較小的屏幕（寬度為 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
結果：
完整的網站技術參考手冊
我們的參考手冊涵蓋了網站技術的方方面面。
其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。
在線實例測試工具
在 CodeW3C.com，我們提供上千個實例。
通過使用我們的在線編輯器，你可以編輯這些例子，并對代碼進行實驗。
快捷易懂的學習方式
一寸光陰一寸金，因此，我們為您提供快捷易懂的學習內容。
在這里，您可以通過一種易懂的便利的模式獲得您需要的任何知識。
提示：如需創建 2 列布局，請將寬度更改為 50％。如需創建 4 列布局，請使用 25％。
提示：您是否想知道 @media 規則如何工作？請在我們的 CSS 媒體查詢 這一章中學習更多相關知識。
提示：創建列布局的一種更現代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，請使用浮動（如上所示）。
如需了解有關 Flexible Box 布局模塊的更多信息，請閱讀我們的 CSS Flexbox 教程。
不相等的欄
主要內容（main content）是您網站上最大、最重要的部分。
列寬不相等的情況很常見，因為大部分空間都為主內容保留。附屬內容（如果有）通常用作替代導航或指定與主要內容有關的信息。您可以隨意更改寬度，只要記住它的總和應為 100％：
實例
.column {
float: left;
}
/* 左和右列 */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* 響應式布局 - 使三列堆疊，而不是并排 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
結果：
完整的網站技術參考手冊
我們的參考手冊涵蓋了網站技術的方方面面。
其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。
在線實例測試工具
在 CodeW3C.com，我們提供上千個實例。
通過使用我們的在線編輯器，你可以編輯這些例子，并對代碼進行實驗。
快捷易懂的學習方式
一寸光陰一寸金，因此，我們為您提供快捷易懂的學習內容。
在這里，您可以通過一種易懂的便利的模式獲得您需要的任何知識。
頁腳
頁腳位于頁面底部。它通常包含諸如版權和聯系方式之類的信息：
實例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
結果：
