在Web前端開發中，布局頁面是一項最基礎的技能。CSS布局技術就是實現頁面布局的一種方法。本文將手把手講解如何用CSS布局一個首頁。

首先，我們需要了解一些CSS的基礎知識。CSS有很多選擇器用于選取HTML元素。常見的有：

*：選取所有元素
#id：選取id為“id”的元素
.class：選取class為“class”的元素
element：選取標簽名為“element”的所有元素
element.class：選取所有class為“class”的“element”元素
element,element：選擇所有給定元素的并集

接下來，我們開始布局一個首頁。先建立HTML的結構：

<div class="container">
<header class="header"></header>
<nav class="nav"></nav>
<div class="content"></div>
<aside class="sidebar"></aside>
<footer class="footer"></footer>
</div>

我們使用了一個容器“container”，里面包含了一個頭部“header”，導航條“nav”，內容“content”，側邊欄“sidebar”和頁腳“footer”。

接著，我們來寫CSS樣式表：

.container {
max-width: 960px;
margin: 0 auto;
}
.header {
height: 100px;
background-color: #ddd;
}
.nav {
background-color: #333;
height: 40px;
}
.content {
float: left;
width: 620px;
background-color: #eee;
}
.sidebar {
float: right;
width: 300px;
background-color: #ccc;
}
.footer {
clear: both;
height: 100px; 
background-color: #ddd;
}

我們使用了一個容器“container”，設置最大寬度為960像素，左右自動居中。頭部“header”和頁腳“footer”高度為100像素，背景顏色為#ddd。導航條“nav”高度為40像素，背景顏色為#333。內容“content”和側邊欄“sidebar”的寬度分別為620像素和300像素，使用浮動布局。內容部分背景顏色為#eee，側邊欄背景顏色為#ccc。頁腳部分使用“clear:both”清除浮動。

最終實現了一個簡單的首頁布局。這只是CSS布局的一個入門級例子，如果要實現更復雜的布局，需要了解更多的CSS布局技巧。