CSS布局代碼示例怎么寫

CSS布局是網(wǎng)頁設計的核心，它決定了網(wǎng)頁元素如何排列和展示，下面是一個簡單的CSS布局代碼示例，幫助你快速入門CSS布局。

HTML結構：

<div class="container">
  <div class="header">Header</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

CSS樣式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.header {
  height: 100px;
  background-color: #f00;
}
.main {
  flex: 1;
  background-color: #0f0;
}
.footer {
  height: 50px;
  background-color: #00f;
}

解釋：

1、.container：容器，用于包裹整個頁面內(nèi)容，設置display: flex將其轉換為Flex容器，flex-direction: column表示子元素垂直排列，align-items: center和justify-content: center分別表示子元素在水平和垂直方向上居中對齊。height: 100vh表示容器高度為100%。

2、.header：頭部，高度為100px，背景顏色為紅色。

3、.main，設置flex: 1表示其占據(jù)剩余空間，背景顏色為綠色。

4、.footer：底部，高度為50px，背景顏色為藍色。

代碼實現(xiàn)了一個簡單的CSS布局，其中頭部、主內(nèi)容和底部垂直排列，并且頭部和底部的高度固定，主內(nèi)容占據(jù)剩余空間，你可以根據(jù)自己的需求調整樣式和布局。