CSS 網站佈局
網站佈局
一個網站通常被劃分為頭部、選單、內容和頁尾
有大量不同的佈局設計可供選擇。然而，上面的結構是最常見的之一，我們將在本教程中仔細研究它。
Header
頭部通常位於網站的頂部（或在頂部導航選單的正下方）。它通常包含一個徽標或網站名稱。
導航欄
導航欄包含一個連結列表，以幫助訪問者瀏覽您的網站。
示例
/* 導航欄容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航欄連結 */
.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;
}
/* 響應式佈局 - 使三列在較小的螢幕（600px 寬或更窄）上堆疊而不是並排顯示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
結果
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
提示：要建立 2 列布局，請將寬度更改為 50%。要建立 4 列布局，請使用 25% 等。
提示：您是否想知道 @media 規則是如何工作的？ 在我們的 CSS 媒體查詢章節中瞭解更多資訊。
提示：建立列布局的更現代方法是使用 CSS Flexbox。但是，它不支援 Internet Explorer 10 及更早版本。如果您需要 IE6-10 支援，請使用浮動（如上所示）。
要了解有關 Flexbox 佈局模組的更多資訊，請閱讀我們的 CSS Flexbox 章節。
不等寬的列
主內容是您網站中最大、最重要的部分。
不等寬的列是很常見的，這樣大部分空間就留給了主內容。側邊內容（如果有）通常用作替代導航或指定與主內容相關的資訊。隨意更改寬度，只需記住它們總和應為 100% 即可。
示例
.column {
float: left;
}
/* 左列和右列 */
.column.side {
width: 25%;
}
/* 中列 */
.column.middle {
width: 50%;
}
/* 響應式佈局 - 使三列堆疊在彼此之上，而不是並排 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
結果
側邊
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
主內容
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
側邊
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
頁尾
頁尾位於頁面底部。通常包含版權和聯絡資訊等。
響應式網站佈局
透過使用上面的一些 CSS 程式碼，我們建立了一個響應式網站佈局，它根據螢幕寬度在兩列和全寬列之間變化。
