網頁主頁是網站的門面，它能夠直接影響著用戶第一印象的好壞。除了有吸引人的內容和布局外，CSS也是打造主頁的重要因素之一。下面我們來了解一些CSS的基本使用方法和技巧。

/* 以下是CSS代碼示例 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 20px;
}
a {
color: white;
text-decoration: none;
}
.hero {
background-image: url('hero-bg.jpg');
height: 400px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.hero h1 {
font-size: 50px;
color: white;
text-shadow: 2px 2px #333;
}
.cta {
background-color: #333;
color: white;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.footer {
background-color: #111;
color: white;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
}

上面的代碼展示了如何使用CSS樣式來為網頁主頁，定義header、nav、hero、cta、footer等元素的樣式。通過設置margin、padding、font-family、background-color等屬性，可以為網頁設置合適的間距、字體、背景顏色等。

在這些元素中，header和footer是網頁主頁中很重要的部分，因為它們提供了網站的大致布局和導航。在header中，我們使用了flex布局，使導航欄的鏈接能夠快速自適應和排布；而在footer中，我們也使用了display和justify-content等CSS屬性來控制其布局。

此外，對于hero圖片區和cta區塊，我們使用了相對定位和字體陰影等效果來使其更加醒目、突出。這種字體陰影效果能夠讓文字在背景圖片上更加清晰可讀。

總之，在網頁主頁的設計中，CSS的作用是非常重要的。它能夠改變頁面樣式和布局，讓用戶更加喜歡和使用我們的網站。