CSS3布局是現代Web開發中一個非常重要的部分。在這篇文章中，我們將探討如何使用CSS3布局來構建一個漂亮的網站頭部和主體。

//頭部樣式
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
padding: 20px;
}
.logo {
font-size: 32px;
font-weight: bold;
}
nav {
display: flex;
align-items: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 20px;
cursor: pointer;
}
nav li:hover {
text-decoration: underline;
}
//主體樣式
section {
padding: 50px;
}
.featured {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.featured img {
width: 100%;
height: auto;
}
.featured h3 {
margin: 0;
}
.cta {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ccc;
padding: 30px;
}
.cta div {
display: flex;
align-items: center;
}
.cta h3 {
margin: 0;
}
.cta button {
margin-left: 20px;
font-size: 18px;
padding: 10px 20px;
cursor: pointer;
background-color: #333;
color: #fff;
border: none;
}

在這個代碼示例中，我們使用了flex和grid布局來構建頭部和主體。頭部使用了flex布局，并使用了align-items和justify-content屬性來使其水平居中對齊和垂直居中對齊。在主體中，我們使用grid布局來創建一個帶有三列的網格，并使用grid-gap屬性來設置每個項目之間的間距。

總而言之，CSS3布局是現代Web開發中不可或缺的一個部分。掌握它可以幫助你更好地構建漂亮的網站，并使你的代碼更加清晰易懂。