制作主頁是網(wǎng)頁設計的重要一環(huán)，而CSS樣式表則是樣式控制的關鍵。通過CSS的設置，我們可以使網(wǎng)頁樣式更豐富，更具設計感。下面我們就來介紹如何用CSS制作一個優(yōu)美的主頁。

/*以下為CSS樣式代碼*/
body{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}
#wrapper{
width: 80%;
margin: 0 auto;
}
h1{
text-align: center;
font-size: 3em;
margin-top: 50px;
}
#nav{
float: left;
width: 25%;
margin-right: 5%;
background-color: #f8f8f8;
padding: 10px;
border-radius: 5px;
}
#content{
float: left;
width: 70%;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
.nav-link{
display: block;
margin-bottom: 10px;
text-decoration: none;
color: #333;
}
.nav-link:hover{
color: #f00;
}
.post{
margin-bottom: 20px;
}
.post h2{
font-size: 1.8em;
}
.post p{
line-height: 1.6;
}

首先我們需要先準備一個具體的頁面布局：一個頭部，包括LOGO和標題；一個導航區(qū)域；另一個區(qū)域用于展示主要內(nèi)容。

在CSS的設置中，通過設置body中的屬性，對整個頁面進行全局控制，如margin和padding，分別用于居中和外部邊距的控制，設定font-family和color屬性來設定頁面的默認字體和顏色。

接下來，以#wrapper為頁面主要包裹元素，設置其寬度和居中樣式。在#nav和#content兩個元素中，我們使用浮動float來控制它們的位置，給他們各自的寬度，然后用margin-right來設置它們之間的間距。給他們設置圓角等其他屬性，能夠增強頁面的美感。

導航區(qū)域#nav中，我們設置了一個顏色的背景色，并增加了padding屬性來增加內(nèi)容的顯示空間。在.nav-link選擇器中，我們設定顯示元素的樣式，如display: block;來使得它們占據(jù)一整個區(qū)塊，方便用戶點擊。

在展示區(qū)域#content中，我們只用背景顏色區(qū)分不同的內(nèi)容位置，并對.article等子元素進行了樣式控制，使文章的展示更加美觀和易閱讀。

通過這樣的方式進行CSS設置，可以使我們的主頁更加美觀和專業(yè)，為互聯(lián)網(wǎng)用戶提供更好的體驗。