在網頁設計中，個人詳情頁面是一個重要的部分。HTML用于構建頁面的骨架，而CSS則負責美化頁面的樣式。在這篇文章中，我們將探討如何使用CSS來設計一個漂亮的個人詳情頁面。

/* 設置頁面整體樣式 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 設置標題樣式 */
h1 {
font-size: 36px;
color: #333;
text-align: center;
margin-top: 50px;
}
/* 設置頭像樣式 */
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin: 0 auto;
display: block;
}
/* 設置個人信息樣式 */
.profile {
border: 1px solid #ccc;
background-color: white;
width: 80%;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.profile p {
font-size: 18px;
margin: 10px 0;
}
.profile h2 {
font-size: 24px;
color: #333;
}
/* 設置按鈕樣式 */
.button {
background-color: #333;
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
width: 150px;
margin: 20px auto;
display: block;
}
.button:hover {
background-color: #555;
cursor: pointer;
}

首先，我們需要設置頁面整體樣式，包括背景色和字體。接下來，我們為標題設置樣式，包括字體大小、顏色和居中對齊等。為了美化頁面，我們還可以設置頭像樣式。頭像應該是一個圓形，邊框要突出，并添加一些陰影效果。

接下來，我們將為個人信息區域設置一個樣式。該區域位于頁面中心，并包含多個段落和標題。我們會將它們的字體大小、顏色和邊距進行適當的調整，以使頁面更易于閱讀。

最后，我們將創建一個按鈕樣式，用于快速導航到其他頁面或執行其他操作。按鈕應該有吸引人的背景色和明亮的字體顏色。為了增加頁面的交互性，我們還應該設置按鈕的鼠標懸停樣式。