今天我決定寫css的部分，CSS代碼主要是為網站提供了樣式的設定。一樣今天還是稍微擬定好草稿，設計好大略部分，然後生出程式碼，細項會再慢慢改。

body

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
}

1.font-family: Arial, sans-serif;：設定頁面的主要字體為 Arial，如果使用者電腦上沒有這個字體，會退回使用 sans-serif。
2.margin: 0;：去除網頁的外邊距，讓頁面內容緊貼窗口邊緣。
3.padding: 0;：去除頁面內容的內邊距。
4.background-color: #f4f4f9;：設定網頁背景顏色為淡灰色（#f4f4f9）。

header

header {
    background-color: #3a5d99;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
}

1.background-color: #3a5d99;：設定頁眉背景顏色為深藍色（#3a5d99）。
2.color: white;：設定頁眉文字顏色為白色。
3.text-align: center;：讓頁眉內的文字水平居中。
4.padding: 1.5rem 0;：設定頁眉上下內邊距為 1.5rem，左右內邊距為 0。

section

section {
    padding: 2rem;
    margin: 1.5rem auto;
    max-width: 800px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

1,padding: 2rem;：為每個章節內部設定 2rem 的內邊距，讓文字和邊框保持距離。
2,margin: 1.5rem auto;：讓每個章節上下有 1.5rem 的外邊距，並且設定左右邊距自動，實現居中。
3.max-width: 800px;：設定章節最大寬度為 800px，讓章節內容不會太寬，適合閱讀。
4.background-color: #fff;：章節背景顏色設為白色。
5.border-radius: 10px;：讓章節邊框的四角呈現 10px 的圓角。
6.box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);：為章節添加陰影效果，使其浮在背景上。陰影從 0 水平位移，4px 垂直位移，8px 的模糊半徑，陰影顏色是黑色並具有 0.1 的透明度。

button

button {
    background-color: #3a5d99;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

1.background-color: #3a5d99;：設定按鈕的背景顏色為深藍色（與頁眉一致）。
2.color: white;：按鈕文字顏色設為白色。
3.padding: 10px 20px;：按鈕內部上下邊距設為 10px，左右邊距設為 20px，讓按鈕看起來更大。
4.border: none;：去除按鈕的邊框。
5.border-radius: 5px;：讓按鈕的四角有 5px 的圓角。
6.cursor: pointer;：當鼠標懸停在按鈕上時，鼠標樣式變為指針，表示按鈕可點擊。