Update style.css

style.css

@@ -1,4 +1,4 @@
-/* --- 新增的全域設定 --- */
+/* 全域設定 */
 * {
     box-sizing: border-box;
 }
@@ -44,6 +44,18 @@ h2 {
     padding-bottom: 10px;
 }
 
+h3 {
+    color: #00796b;
+    text-align: center;
+    font-size: 1.8rem;
+    margin-top: 40px;
+}
+
+h4 {
+    color: #005f73;
+    font-size: 1.3rem;
+}
+
 .quote-box {
     background-color: #e0f7fa;
     border-left: 5px solid #00796b;
@@ -56,22 +68,18 @@ h2 {
 /* 圖片容器樣式 */
 .figure-container {
     text-align: center;
-    margin: 30px 0;
-    /* 確保容器本身不會有不必要的內邊距影響寬度 */
+    margin: 20px 0;
     padding: 0;
 }
 
-/* --- 修改開始 (更強制的圖片縮放規則) --- */
 .figure-container img {
-    max-width: 100%; /* 最關鍵的一行：圖片的最大寬度為其容器的100%，確保它不會溢出 */
-    height: auto; /* 保持圖片的長寬比 */
-    display: block; /* 使圖片成為區塊元素，更容易控制 */
-    margin: 15px auto; /* 上下邊距15px，左右自動 (實現水平置中) */
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 15px auto;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
-/* --- 修改結束 --- */
-
 
 .figure-container figcaption {
     margin-top: 10px;
@@ -86,7 +94,7 @@ h2 {
 
 /* 表格樣式 */
 .table-container {
-    overflow-x: auto; /* 在小螢幕上可以水平滾動 */
+    overflow-x: auto;
 }
 
 table {
@@ -118,6 +126,36 @@ td.category {
     text-align: center;
 }
 
+/* --- 新增樣式 --- */
+.section-divider {
+    border: 0;
+    height: 1px;
+    background: #e9ecef;
+    margin: 40px 0;
+}
+
+.method-details {
+    display: grid;
+    grid-template-columns: 1fr; /* 預設單欄，適用手機 */
+    gap: 40px; /* 項目之間的間距 */
+    margin-top: 20px;
+}
+
+/* 在螢幕寬度大於768px時，變為兩欄 */
+@media (min-width: 768px) {
+    .method-details {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.method-item {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+}
+
+/* 工程應用 */
 .app-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -130,6 +168,7 @@ td.category {
     border-left: 5px solid #0a9396;
 }
 
+/* 頁腳 */
 footer {
     text-align: center;
     padding: 20px;
@@ -137,3 +176,4 @@ footer {
     background: #333;
     color: #fff;
 }
+