.elementor-2617 .elementor-element.elementor-element-19be1f38{--display:flex}.elementor-widget-text-editor{color:var(--e-global-color-text);font-family:var(--e-global-typography-text-font-family),Sans-serif;font-size:var(--e-global-typography-text-font-size);font-weight:var(--e-global-typography-text-font-weight);line-height:var(--e-global-typography-text-line-height)}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var(--e-global-color-primary)}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap,.elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var(--e-global-color-primary);border-color:var(--e-global-color-primary)}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}}```css body{font-family:'Noto Sans TC',Arial,sans-serif;line-height:1.6;margin:20px;color:#333;background-color:#f8f8f8}h1,h2,h3{font-weight:600;line-height:1.3;color:#222}h1{font-size:2.5rem;margin-bottom:20px}h2{font-size:2rem;margin-top:40px;margin-bottom:15px;border-bottom:2px solid #eee;padding-bottom:10px}h3{font-size:1.5rem;margin-top:30px;margin-bottom:10px}h4{font-size:1.25rem;margin-top:25px;margin-bottom:10px;font-weight:600}p{font-size:1rem;margin-bottom:20px}a{color:#07c;text-decoration:none}a:hover{text-decoration:underline}ol,ul{margin-bottom:20px;padding-left:40px}ol li,ul li{margin-bottom:10px}ol{list-style-type:decimal}ul{list-style-type:disc}img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid #ddd}label{display:block;margin-bottom:5px;font-weight:600}input[type=text],input[type=email],input[type=number],textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:1rem;font-family:inherit}textarea{min-height:120px}input[type=submit]{background-color:#07c;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s ease}input[type=submit]:hover{background-color:#005fa3}a.button{background-color:#07c;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;text-decoration:none;transition:background-color .3s ease;display:inline-block;margin-bottom:10px}a.button:hover{background-color:#005fa3;text-decoration:none}pre{background-color:#eee;padding:10px;border-radius:4px;overflow-x:auto;margin-bottom:20px}code{font-family:'Courier New',Courier,monospace;font-size:.9rem;color:#d14}@media (max-width:768px){body{margin:10px}h1{font-size:2rem}h2{font-size:1.7rem}h3{font-size:1.3rem}ol,ul{padding-left:20px}}``` **說明：** * **通用設定：** 設定基本的字型、行高、顏色、背景顏色等，並優先使用 `Noto Sans TC` 字型。 * **標題樣式：** 設定 H1 到 H4 的字體大小、行高、顏色、邊距，並為 H2 添加底邊框。 * **段落樣式：** 設定段落的字體大小和邊距。 * **連結樣式：** 設定連結顏色和滑鼠懸停效果。 * **清單樣式：** 設定有序清單和無序清單的樣式和邊距。 * **圖片樣式：** 讓圖片在不同螢幕尺寸下都能自適應寬度，並設定最大寬度為 100%。 * **表單樣式：** 設定表單元素的樣式，包括標籤、輸入框、文字區域和提交按鈕。 ```css body{font-family:'Noto Sans TC',Arial,sans-serif;line-height:1.6;margin:20px;color:#333;background-color:#f8f8f8}h1,h2,h3{font-weight:600;line-height:1.3;color:#222}h1{font-size:2.5rem;margin-bottom:20px}h2{font-size:2rem;margin-top:40px;margin-bottom:15px;border-bottom:2px solid #eee;padding-bottom:10px}h3{font-size:1.5rem;margin-top:30px;margin-bottom:10px}h4{font-size:1.25rem;margin-top:25px;margin-bottom:10px;font-weight:600}p{font-size:1rem;margin-bottom:20px}a{color:#07c;text-decoration:none}a:hover{text-decoration:underline}ol,ul{margin-bottom:20px;padding-left:40px}ol li,ul li{margin-bottom:10px}ol{list-style-type:decimal}ul{list-style-type:disc}img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid #ddd}label{display:block;margin-bottom:5px;font-weight:600}input[type=text],input[type=email],input[type=number],textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:1rem;font-family:inherit}textarea{min-height:120px}input[type=submit]{background-color:#07c;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s ease}input[type=submit]:hover{background-color:#005fa3}a.button{background-color:#07c;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;text-decoration:none;transition:background-color .3s ease;display:inline-block;margin-bottom:10px}a.button:hover{background-color:#005fa3;text-decoration:none}pre{background-color:#eee;padding:10px;border-radius:4px;overflow-x:auto;margin-bottom:20px}code{font-family:'Courier New',Courier,monospace;font-size:.9rem;color:#d14}@media (max-width:768px){body{margin:10px}h1{font-size:2rem}h2{font-size:1.7rem}h3{font-size:1.3rem}ol,ul{padding-left:20px}}``` **說明：** * **通用設定：** 設定基本的字型、行高、顏色、背景顏色等，並優先使用 `Noto Sans TC` 字型。 * **標題樣式：** 設定 H1 到 H4 的字體大小、行高、顏色、邊距，並為 H2 添加底邊框。 * **段落樣式：** 設定段落的字體大小和邊距。 * **連結樣式：** 設定連結顏色和滑鼠懸停效果。 * **清單樣式：** 設定有序清單和無序清單的樣式和邊距。 * **圖片樣式：** 讓圖片在不同螢幕尺寸下都能自適應寬度，並設定最大寬度為 100%。 * **表單樣式：** 設定表單元素的樣式，包括標籤、輸入框、文字區域和提交按鈕。 * **按鈕樣式 (額外):** 針對文中可能用 `<a>` 標籤模擬的按鈕，提供樣式。 * **程式碼區塊樣式:** 設定程式碼區塊和行內程式碼的樣式。 * **響應式設計：** 使用 `@media` 查詢，針對小螢幕 (寬度小於 768px) 調整樣式，例如減小邊距和字體大小。 **使用方法：** 1. 將以上 CSS 程式碼複製到你的 CSS 檔案中（例如 `style.css`）。 2. 在 HTML 檔案的 `<head>` 區域中引入 CSS 檔案： ```html <link rel="stylesheet" href="style.css">``` **客製化：** * 你可以根據自己的喜好和品牌風格調整顏色、字型、大小等。 * 如果你的網頁有其他元素，可以添加相應的 CSS 樣式。 這份 CSS 樣式提供了一個基礎且美觀的網頁樣式，你可以根據自己的需求進行修改和擴展。記得要保持網頁的可讀性和易用性，並確保樣式在不同裝置和瀏覽器上都能良好呈現。