DeepSeek

讚
留言
分享

軟體工程薪資比較表

讚

留言

1/5 基礎表格

【步驟 1】基本結構（3 行）
先輸入文件類型與最外層的 <html> 標籤（包含開閉標籤）：

<!DOCTYPE html><html lang="zh-Hant"></html>

【步驟 2】加入 head 與 body（+4 行，共 7 行）
在 <html> 裡面，成對加入 <head> 與 <body> 區塊：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
  </head>
  <body>
  </body>
</html>

【步驟 3】填入 head 的基本內容（+4 行，共 11 行）
在 <head> 區塊內加入說明性註解、 <meta> 以及 <title> 標籤：

<head>
  <!-- 設定文件的字元編碼為 UTF-8，確保中文等特殊字元正確顯示 -->
  <meta charset="UTF-8">
  <!-- 網頁標題，瀏覽器頁籤上會顯示此文字 -->
  <title>課程一：HTML 表格基礎</title>
</head>

接著開始補入 <body> 裡的表格部分：

【步驟4】在 body 裡加入 table 骨架（+3 行）
於 <body> 裡加入註解與空的 <table> 區塊：

<body>
  <!-- 建立一個表格 -->
  <table>
  </table>
</body>

【步驟 5】加入表格標題列的骨架（+3 行）
在 <table> 裡先輸入標題列的註解及 <tr> 區塊（暫時空著內容）：

 <table>

  <!-- 第一列：表格標題列 -->
  <tr>
  </tr>

</table>

【步驟 6】填入表頭儲存格（+3 行）
一次補入三個成對的 <th>：

  <tr>
    <th>項目</th>
    <th>內容</th>
    <th>備註</th>
  </tr>

【步驟 7】加入第一筆資料列的骨架（+3 行）
輸入註解及空的 <tr> 區塊：

  <tr>
    <th>項目</th>
    <th>內容</th>
    <th>備註</th>
  </tr>

  <!-- 第二列：第一筆資料 -->
  <tr>
  </tr>

【步驟 8】填入第一筆資料內容（+3 行）
補入三個成對的 <td>：

  <tr>
    <td>資料 1</td>
    <td>說明文字</td>
    <td>無</td>
  </tr>

【步驟 9】加入第二筆資料列的骨架（+3 行）
輸入註解及空的 <tr>：

  <tr>
    <td>資料 1</td>
    <td>說明文字</td>
    <td>無</td>
  </tr>

<!-- 第三列：第二筆資料 --

<tr>

  </tr>

【步驟 10】填入第二筆資料內容（+3 行）
補入對應的 <td> 儲存格：

  <tr>
    <td>資料 2</td>
    <td>其他內容</td>
    <td>無</td>
  </tr>

【步驟 11】加入空的 style 區塊（+2 行，共 13 行）
在 <head> 裡再成對加入 <style> 區塊（先空著，待後續補入內容）：

<head>

</head>

<style>
</style>

<body>
</body>

接下來在 <style> 區塊內分段填入內容，每次新增不超過 4 行（內部縮排可忽略計算）：

【步驟 12】在 style 裡加入「表格樣式」的標題與 table 區塊骨架（+3 行）
先把註解和 table 區塊的開合標籤一次輸入：

<style>

    /* 設定表格的樣式 */
    table {
    }

</style>

【步驟 13】補入 table 區塊第一個屬性（+2 行）
在 table 區塊內加入第一組屬性，說明合併邊框與屬性設定：

    table {
      /* 合併表格邊框，讓表格看起來更整齊 */
      border-collapse: collapse;
    }

【步驟 14】繼續補入 table 區塊其他屬性（+3 行）
補上設定寬度與置中（此處連同註解一起輸入）：

    table {

     /* 合併表格邊框，讓表格看起來更整齊 */
      border-collapse: collapse;

     /* 設定表格寬度為 80%，並置中 */
      width: 80%;
      margin: 20px auto;
    }

【步驟 15】加入 th, td 樣式的骨架（+2 行）
成對加入針對 <th> 與 <td> 的區塊：

    table {

     /* 合併表格邊框，讓表格看起來更整齊 */
      border-collapse: collapse;

     /* 設定表格寬度為 80%，並置中 */
      width: 80%;
      margin: 20px auto;

     /* 設定表格標題（th）與儲存格（td）的共同樣式 */
      th, td {
    } 
    }

【步驟 16】在 th, td 區塊內填入第一屬性（+2 行）
加入註解與設定儲存格邊框：

    th, td {
      /* 設定儲存格邊框 */
      border: 1px solid #ccc;
    }

【步驟 17】繼續補入 th, td 的其他屬性（+3 行）
分別輸入設定內邊距與文字置中的部分：

    th, td {
      /* 設定儲存格內邊距，增加內容與邊框間距 */
      padding: 8px 12px;
      /* 文字置中 */
      text-align: center;
    }

【步驟 18】加入針對 th 的背景顏色區塊骨架（+2 行）
成對加入 <th> 的獨立設定區塊：

    /* 對表頭（th）設定背景顏色 */
    th {
    }

【步驟 19】補入 th 區塊的屬性（+1 行）
設定背景顏色：

    th, td {
      /* 設定儲存格內邊距，增加內容與邊框間距 */
      padding: 8px 12px;
      /* 文字置中 */
      text-align: center;
    }

    th {
      background-color: #f2f2f2;
    }

此時 <style> 區塊內所有內容已完成。

觀看參考答案

See the Pen 表格 by 01 Scratchinai (@01-Scratchinai) on CodePen.

2/5 建立按鈕與事件處理

以下是一個分步輸入的參考流程，每次新增的程式碼行數（不含縮排或空白行）都控制在最多 4 行，而且成對標籤（例如 <head>…</head>、<table>…</table>、<script>…</script>）會一次完整輸入，再逐步補入內部內容。以下提供一個可能的分解方式：

【步驟 1】建立基本結構（3 行）
先輸入文件類型、註解與最外層 <html> 標籤：

<!DOCTYPE html>
<!-- 宣告文件類型為 HTML5 -->
<html lang="zh-Hant">
</html>

【步驟 2】加入主要區塊（+4 行，共 7 行）
在 <html> 內成對加入說明語言的註解、<head> 與 <body> 區塊：

<html lang="zh-Hant">
  <!-- 設定主要語言為繁體中文 -->
  <head>
  </head>
  <body>
  </body>
</html>

【步驟 3】填入 head 的基本內容（+4 行，共 11 行）
在 <head> 區塊內依序加入設定字元編碼的註解與 <meta>，以及設定標題的註解與 <title>：

  <head>
    <!-- 設定網頁使用的字元編碼為 UTF-8，確保中文及其他特殊字元正確顯示 -->
    <meta charset="UTF-8">
    <!-- 設定網頁標題，瀏覽器標籤上會顯示此文字 -->
    <title>課程二：按鈕與事件處理</title>
  </head>

【步驟 4】加入空的 style 區塊（+2 行，共 13 行）
於 <head> 中成對加入 <style>（先空著，待後續補入 CSS 內容）：

    <style>
    </style>

接下來，分段在 <style> 區塊內補入 CSS 內容，每次新增不超過 4 行：

【步驟 5】加入 CSS 區塊的說明與表格基本註解（+2 行）

      /* 以下為 CSS 區塊，用來定義網頁中表格的外觀 */
      /* 設定表格基本樣式 */

【步驟 6】成對加入 table 標籤（+2 行）

      table {
      }

【步驟 7】填入 table 內第一組屬性（+2 行）
在 table 區塊內加入註解與設定邊框合併：

      table {
        /* 將表格的邊框合併為一條，避免重複顯示 */
        border-collapse: collapse;
      }

【步驟 8】補入 table 內設定寬度的屬性（+2 行）

      table {
        /* 設定表格寬度為 80% 並置中 */
        width: 80%;
      }

【步驟 9】補入 table 內設定外邊距的屬性（+2 行）

      table {
        /* 設定表格上下外邊距為 20px，左右自動置中 */
        margin: 20px auto;
      }

（注意：步驟 7～9可視為在同一 table 區塊內逐步累積內容。）

【步驟 10】加入 th, td 共用樣式的說明與規則骨架（+2 行）

      /* 設定表頭 (th) 與資料儲存格 (td) 的共用樣式 */
      th, td {
      }

【步驟 11】填入 th, td 內的邊框屬性（+2 行）

      th, td {
        /* 設定每個儲存格的邊框樣式 */
        border: 1px solid #ccc;
      }

【步驟 12】補入 th, td 內的內邊距屬性（+2 行）

      th, td {
        /* 設定儲存格內邊距，讓內容與邊框有一定間距 */
        padding: 8px 12px;
      }

【步驟 13】補入 th, td 內文字置中的屬性（+2 行）

      th, td {
        /* 文字內容置中 */
        text-align: center;
      }

【步驟 14】加入 th 背景色的規則成對（+3 行）

      /* 設定表頭 (th) 的背景色 */
      th {
        background-color: #f2f2f2;
      }

此時 <style> 區塊內的 CSS 部分已完成。

接下來補入 <body> 內的 HTML 表格與 JavaScript 區塊：

【步驟 15】在 body 裡加入 table 的骨架（+3 行）

  <body>
    <!-- 建立一個表格 -->
    <table>
    </table>
  </body>

【步驟 16】於 table 內加入表頭列的骨架（+3 行）

      <!-- 表格的第一列：表頭 -->
      <tr>
      </tr>

【步驟 17】填入表頭列的內容（+3 行）
在已建立的 <tr> 內補入表頭儲存格：

        <!-- 表頭儲存格：欄位名稱 -->
        <th>項目</th>
        <th>動作</th>

【步驟 18】加入資料列的骨架（+3 行）

      <!-- 表格的第二列：資料列 -->
      <tr>
      </tr>

【步驟 19】填入資料列中第一個儲存格（+2 行）

        <!-- 第一個儲存格：顯示資料內容 -->
        <td>資料 1</td>

【步驟 20】於資料列中成對加入空的第二個儲存格（+3 行）
先成對輸入第二個儲存格（內部稍後補內容）：

        <!-- 第二個儲存格：包含一個按鈕 -->
        <td>
        </td>

【步驟 21】填入第二個儲存格內的按鈕內容（+2 行）
在 <td> 內補入註解與按鈕元素：

          <!-- 按鈕元素，id 為 alertBtn，點擊後會觸發事件 -->
          <button id="alertBtn">點我試試</button>

【步驟 22】於 body 中加入成對的 script 區塊（+2 行）
在 table 之後，輸入空的 <script> 區塊：

    <script>
    </script>

【步驟 23】在 script 區塊內加入綁定事件的說明與函式骨架（+3 行）
一次輸入註解及完整的 addEventListener 成對函式（內部待補）：

      // 使用 document.getElementById 取得具有 id "alertBtn" 的按鈕元素，
      // 並使用 addEventListener 綁定 "click" 事件
      document.getElementById("alertBtn").addEventListener("click", function() {
      });

【步驟 24】填入函式內的執行內容（+2 行）
在函式區塊內補入註解與 alert 語句：

        // 當按鈕被點擊時，彈出一個提示視窗，顯示訊息
        alert("你點擊了按鈕！");

以上各步驟皆遵循「每次新增不超過 4 行」的原則，且遇到成對標籤時先一次完整輸入，再逐步補入內部內容。依此順序逐步累積即可完成完整程式碼。

See the Pen 建立按鈕與事件處理 by 01 Scratchinai (@01-Scratchinai) on CodePen.

3/5 Modal（彈出視窗）的設計與 CSS 樣式

【步驟 1】建立基本結構（3 行）
先輸入文件類型、說明註解與最外層 <html> 標籤：

<!DOCTYPE html>
<!-- 宣告此文件為 HTML5 文件 -->
<html lang="zh-Hant">
</html>

【步驟 2】加入主要區塊（+4 行，共 7 行）
在 <html> 裡成對加入 <head> 與 <body> 區塊：

<html lang="zh-Hant">
  <head>
  </head>
  <body>
  </body>
</html>

【步驟 3】填入 head 內基本內容（+4 行，共 11 行）
在 <head> 中依序加入字元編碼與標題（含註解）：

  <head>
    <!-- 設定文件的字元編碼為 UTF-8，確保中文及其他特殊字元正確顯示 -->
    <meta charset="UTF-8">
    <!-- 設定網頁標題 -->
    <title>課程三：Modal 彈出視窗設計</title>
  </head>

【步驟 4】加入空的 style 區塊（+2 行，共 13 行）
於 <head> 中成對加入 <style> 區塊（內部內容待補）：

    <style>
    </style>

接下來，在 <style> 區塊內依序補入 CSS 內容，每次新增不超過 4 行：

【步驟 5】加入 Modal 背景遮罩的註解（+3 行）

      /* ------------------------------ */
      /* Modal 背景遮罩樣式設定 */
      /* ------------------------------ */

【步驟 6】成對加入 .modal 區塊（+2 行）

      .modal {
      }

【步驟 7】填入 .modal 區塊前四個屬性（+4 行）

      .modal {
        display: none; /* 初始隱藏，只有點擊按鈕後才會顯示 */
        position: fixed; /* 固定定位，讓 modal 覆蓋整個瀏覽器視窗 */
        z-index: 1; /* 設定堆疊順序，確保 modal 位於其他內容上方 */
        left: 0; /* 從視窗左邊開始 */
      }

【步驟 8】繼續補入 .modal 內的後續屬性（+4 行）

      .modal {
        top: 0; /* 從視窗頂部開始 */
        width: 100%; /* 寬度覆蓋整個視窗 */
        height: 100%; /* 高度覆蓋整個視窗 */
        overflow: auto; /* 如內容過多則允許滾動 */
      }

【步驟 9】補入 .modal 的最後一個屬性（+1 行）

      .modal {
        background-color: rgba(0,0,0,0.4); /* 半透明黑色背景，達到遮罩效果 */
      }

【步驟 10】加入 Modal 內容區的註解（+3 行）

      /* ------------------------------ */
      /* Modal 內容區樣式設定 */
      /* ------------------------------ */

【步驟 11】成對加入 .modal-content 區塊（+2 行）

      .modal-content {
      }

【步驟 12】填入 .modal-content 的前三個屬性（+3 行）

      .modal-content {
        background-color: #fff; /* 背景為白色 */
        margin: 15% auto; /* 上下留 15% 空間，左右自動置中 */
        padding: 20px; /* 內容區內邊距，增加內容與邊框的間距 */
      }

【步驟 13】補入 .modal-content 的後三個屬性（+3 行）

      .modal-content {
        border: 1px solid #888; /* 灰色邊框 */
        width: 50%; /* 寬度為視窗寬度的 50% */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 加上陰影，增加浮動效果 */
      }

【步驟 14】加入關閉按鈕的註解（+3 行）

      /* ------------------------------ */
      /* 關閉按鈕樣式設定 */
      /* ------------------------------ */

【步驟 15】成對加入 .close 區塊（+2 行）

      .close {
      }

【步驟 16】填入 .close 區塊前三個屬性（+3 行）

      .close {
        color: #aaa; /* 初始文字顏色為淡灰色 */
        float: right; /* 靠右對齊 */
        font-size: 28px; /* 較大的字體尺寸 */
      }

【步驟 17】補入 .close 區塊剩餘兩個屬性（+2 行）

      .close {
        font-weight: bold; /* 粗體 */
        cursor: pointer; /* 滑鼠移到上面時呈現手型 */
      }

【步驟 18】成對加入 .close:hover 區塊（+2 行）

      .close:hover {
      }

【步驟 19】填入 .close:hover 的屬性（+1 行）

      .close:hover {
        color: #000; /* 當滑鼠懸停時，文字顏色變為黑色 */
      }

至此，<style> 區塊內的 CSS 已完成。

接下來開始補入 <body> 內的 HTML 結構：

【步驟 20】在 body 中加入 Modal 結構的外層容器（+3 行）

  <body>
    <!-- Modal 結構：包含背景遮罩與內容區 -->
    <div id="myModal" class="modal">
    </div>
  </body>

【步驟 21】在 Modal 容器內加入 Modal 內容區的骨架（+2 行）

    <div id="myModal" class="modal">
      <!-- Modal 內容區 -->
      <div class="modal-content">
      </div>
    </div>

【步驟 22】於 modal-content 內加入關閉按鈕（+2 行）

      <div class="modal-content">
        <!-- 關閉按鈕，點擊後可關閉 modal -->
        <span class="close">&times;</span>
      </div>

元素類型 - <span>：<span> 是一個行內元素（inline element），通常用來包裝少量文字或其他行內內容，方便針對特定部分應用 CSS 樣式或 JavaScript 操作。
與 <div> 不同，<span> 不會自動產生換行效果，適合用於嵌入在其他文本或元素之中。內容 - &times;：
&times; 是一個HTML 實體字符（HTML entity），代表「乘號」符號 ×。
在網頁設計中，這個符號常用作「關閉」或「取消」的圖示。用戶看到這個符號時，通常會聯想到關閉視窗的操作。
功能與互動：
此 <span> 元素作為一個關閉按鈕，並非傳統意義上的按鈕（如 <button>），但在這裡它被用來提供關閉 Modal 的功能。

【步驟 23】再加入 Modal 中顯示的內容（+2 行）

      <div class="modal-content">
        <!-- Modal 中顯示的內容 -->
        <p>這是彈出視窗的內容！</p>
      </div>

【步驟 24】在 Modal 外加入示範按鈕（+2 行）

    <!-- 示範按鈕：點擊後將開啟 modal -->
    <button id="openModalBtn">開啟視窗</button>

【步驟 25】在 body 底部成對加入空的 script 區塊（+2 行）

    <script>
    </script>

接下來，在 <script> 區塊內依序加入 JavaScript 程式碼，每次新增不超過 4 行：

【步驟 26】取得 Modal 與示範按鈕（+3 行）

      // 取得 Modal 元素，示範按鈕與關閉按鈕
      var modal = document.getElementById("myModal");
      var openModalBtn = document.getElementById("openModalBtn");

【步驟 27】取得關閉按鈕（+2 行）

      // 由於 class "close" 可能有多個元素，此處取得第一個
      var closeBtn = document.getElementsByClassName("close")[0];

【步驟 28】為示範按鈕綁定點擊事件（+2 行）

      // 為示範按鈕綁定點擊事件：點擊後顯示 Modal
      openModalBtn.addEventListener("click", function() {
      });

【步驟 29】在示範按鈕事件內加入顯示 Modal 的程式碼（+1 行）

        modal.style.display = "block"; // 改變 display 屬性為 block，使 modal 顯示

【步驟 30】為關閉按鈕綁定點擊事件（+2 行）

      // 為關閉按鈕綁定點擊事件：點擊後隱藏 Modal
      closeBtn.addEventListener("click", function() {
      });

【步驟 31】在關閉按鈕事件內加入隱藏 Modal 的程式碼（+1 行）

        modal.style.display = "none"; // 隱藏 modal

【步驟 32】為整個視窗綁定點擊事件（+2 行）

      // 為整個視窗綁定點擊事件：若點擊到 Modal 背景（非內容區），則隱藏 Modal
      window.addEventListener("click", function(event) {
      });

【步驟 33】在 window 事件內加入判斷式（+2 行）

        if (event.target == modal) { // 檢查點擊目標是否為 modal 背景
        }

【步驟 34】在 if 區塊內加入隱藏 Modal 的程式碼（+1 行）

          modal.style.display = "none"; // 隱藏 modal

See the Pen Modal（彈出視窗）的設計與 CSS 樣式 by 01 Scratchinai (@01-Scratchinai) on CodePen.

4/5 整合實作－表格按鈕觸發 Modal 彈出視窗

以下提供一個分步輸入的參考流程，依據「每次新增的程式碼行數（不含縮排或空白行）不超過 4 行」的原則，且遇到成對標籤時，先一次輸入成對標籤，再逐步補入內部內容。以下是一個可能的分解方式：

【步驟 1】建立基本結構

先輸入文件類型、註解與最外層 <html> 標籤：

<!DOCTYPE html>
<!-- 宣告文件為 HTML5 -->
<html lang="zh-Hant">
</html>

【步驟 2】加入主要區塊

在 <html> 裡成對加入 <head> 與 <body> 區塊：

<html lang="zh-Hant">
  <head>
  </head>
  <body>
  </body>
</html>

【步驟 3】填入 `<head>` 內基本內容

在 <head> 中依序加入字元編碼與標題（含註解）：

  <head>
    <!-- 設定字元編碼為 UTF-8，確保中文正確顯示 -->
    <meta charset="UTF-8">
    <!-- 設定網頁標題 -->
    <title>課程四：整合實作</title>
  </head>

【步驟 4】加入空的 `<style>` 區塊

於 <head> 中成對加入 <style>（內部內容待補）：

    <style>
    </style>

接下來，分段在 <style> 區塊內補入 CSS 內容，每次新增不超過 4 行：

表格樣式部分

【步驟 5】加入表格樣式設定的註解（3 行）

      /* ------------------------------ */
      /* 以下為表格樣式設定 */
      /* ------------------------------ */

【步驟 6】成對加入 table 區塊（2 行）

      table {
      }

【步驟 7】填入 table 內前兩組屬性（4 行）

      table {
        /* 合併儲存格邊框，避免重複的線條 */
        border-collapse: collapse;
        /* 設定表格寬度為 80%，並置中顯示 */
        width: 80%;
      }

【步驟 8】補入 table 的外邊距屬性（2 行）

      table {
        /* 上下邊距 20px，左右自動 */
        margin: 20px auto;
      }

【步驟 9】成對加入 th, td 區塊（2 行）

      th, td {
      }

【步驟 10】填入 th, td 區塊的前兩組屬性（4 行）

      th, td {
        /* 每個儲存格都有 1px 寬的實線邊框，顏色為淺灰色 */
        border: 1px solid #ccc;
        /* 設定儲存格內邊距，增加內容與邊框間距 */
        padding: 8px 12px;
      }

【步驟 11】補入 th, td 區塊剩餘屬性（2 行）

      th, td {
        /* 文字置中 */
        text-align: center;
      }

【步驟 12】成對加入 th 區塊（2 行）

      th {
      }

【步驟 13】填入 th 區塊的屬性（2 行）

      th {
        /* 表頭儲存格背景色設定為淺灰色 */
        background-color: #f2f2f2;
      }

Modal 樣式部分

【步驟 14】加入 Modal 樣式設定前的註解（3 行）

      /* ------------------------------ */
      /* 以下為 Modal 彈出視窗樣式設定 */
      /* ------------------------------ */

【步驟 15】加入 Modal 背景遮罩的註解（1 行）

      /* Modal 背景遮罩 */

【步驟 16】成對加入 .modal 區塊（2 行）

      .modal {
      }

【步驟 17】填入 .modal 區塊前四個屬性（4 行）

      .modal {
        display: none; /* 初始隱藏 */
        position: fixed; /* 固定定位，使其覆蓋整個瀏覽器視窗 */
        z-index: 1; /* 設定堆疊順序，確保 Modal 位於其他內容之上 */
        left: 0; /* 從視窗最左邊開始 */
      }

【步驟 18】補入 .modal 區塊後續屬性（4 行）

      .modal {
        top: 0; /* 從視窗最上面開始 */
        width: 100%; /* 寬度覆蓋全螢幕 */
        height: 100%; /* 高度覆蓋全螢幕 */
        overflow: auto; /* 如內容超出則出現滾動條 */
      }

【步驟 19】補入 .modal 的最後一個屬性（1 行）

      .modal {
        background-color: rgba(0,0,0,0.4); /* 半透明黑色背景，達到遮罩效果 */
      }

【步驟 20】成對加入 Modal 內容區的註解及區塊（2+2 行）
先加入註解：

      /* Modal 內容 */

接著成對加入 .modal-content 區塊：

      .modal-content {
      }

【步驟 21】填入 .modal-content 區塊前四個屬性（4 行）

      .modal-content {
        background-color: #fff; /* 白色背景 */
        margin: 15% auto; /* 上下保留 15% 空間，左右置中 */
        padding: 20px; /* 內邊距，增加內容與邊框間距 */
        border: 1px solid #888; /* 灰色邊框 */
      }

【步驟 22】補入 .modal-content 的剩餘屬性（2 行）

      .modal-content {
        width: 50%; /* 寬度設定為視窗的 50% */
        /* 加上陰影效果，讓 Modal 看起來更浮動 */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      }

【步驟 23】成對加入關閉按鈕 .close 區塊（2 行）

      .close {
      }

【步驟 24】填入 .close 區塊前三個屬性（4 行）

      .close {
        color: #aaa; /* 初始文字顏色為淡灰色 */
        float: right; /* 靠右排列 */
        font-size: 28px; /* 大字體尺寸 */
        font-weight: bold; /* 加粗字體 */
      }

【步驟 25】補入 .close 區塊最後一屬性（1 行）

      .close {
        cursor: pointer; /* 滑鼠移上去變成手型 */
      }

【步驟 26】成對加入 .close:hover 區塊（2 行）

      .close:hover {
      }

【步驟 27】填入 .close:hover 區塊的屬性（1 行）

      .close:hover {
        color: #000; /* 滑鼠懸停時變為黑色 */
      }

至此，<style> 區塊內的 CSS 部分已完成。

接下來開始補入 <body> 內的 HTML 結構：

HTML 表格區塊

【步驟 28】在 <body> 中加入表格區塊的註解與成對 <table>（3 行）

  <body>
    <!-- ============================ -->
    <!-- HTML 表格區塊 -->
    <!-- ============================ -->
    <table>
    </table>
  </body>

【步驟 29】於 <table> 裡加入表格標題列的骨架（3 行）

    <table>
      <!-- 表格標題列 -->
      <tr>
      </tr>
    </table>

【步驟 30】填入表格標題列的內容（2 行）

      <tr>
        <th>項目</th>
        <th>動作</th>
      </tr>

【步驟 31】加入第一筆資料列的骨架（3 行）

      <!-- 第一筆資料列 -->
      <tr>
      </tr>

【步驟 32】填入第一筆資料列的內容（3 組行）
先填入第一個儲存格：

        <td>資料 1</td>

再成對加入第二個儲存格（內部稍後補）：

        <td>
        </td>

【步驟 33】於第一筆資料列中補入按鈕（2 行）

          <!-- 按鈕，當點擊時會彈出 Modal 視窗；class 設定為 popup-btn -->
          <button class="popup-btn">點擊我</button>

【步驟 34】加入第二筆資料列的骨架（3 行）

      <!-- 第二筆資料列 -->
      <tr>
      </tr>

【步驟 35】填入第二筆資料列的內容（3 組行）
第一個儲存格：

        <td>資料 2</td>

再成對加入第二個儲存格：

        <td>
        </td>

【步驟 36】於第二筆資料列中補入按鈕（1 行）

          <!-- 同樣的按鈕 -->
          <button class="popup-btn">點擊我</button>

Modal 彈出視窗區塊

【步驟 37】在 <body> 中加入 Modal 區塊的註解與成對 <div>（3 行）

    <!-- ============================ -->
    <!-- Modal 彈出視窗區塊 -->
    <!-- ============================ -->
    <div id="myModal" class="modal">
    </div>

【步驟 38】於 Modal 外層 <div> 內加入 Modal 內容區的骨架（2 行）

    <div id="myModal" class="modal">
      <!-- Modal 內容區 -->
      <div class="modal-content">
      </div>
    </div>

【步驟 39】在 Modal 內容區內加入關閉按鈕（2 行）

      <div class="modal-content">
        <!-- 關閉按鈕（使用 &times; 代表 X 符號） -->
        <span class="close">&times;</span>
      </div>

【步驟 40】在 Modal 內容區內加入顯示內容（1 行）

        <!-- Modal 中的顯示內容 -->
        <p>這是彈出視窗的內容！</p>

JavaScript 程式碼部分

【步驟 41】在 <body> 底部加入 JavaScript 區塊註解與成對 <script>（3 行）

    <!-- ============================ -->
    <!-- JavaScript 程式碼 -->
    <!-- ============================ -->
    <script>
    </script>

【步驟 42】於 <script> 內依序加入取得 DOM 元素的程式碼（3 行）

      // 取得 Modal 的 DOM 元素
      var modal = document.getElementById("myModal");
      // 取得所有具有 .popup-btn 類別的按鈕（表格中的按鈕）
      var buttons = document.querySelectorAll(".popup-btn");

【步驟 43】取得 Modal 內關閉按鈕（2 行）

      // 取得 Modal 內關閉按鈕，這裡只取第一個（假設只有一個 Modal）
      var closeBtn = document.getElementsByClassName("close")[0];

【步驟 44】為每個按鈕綁定點擊事件（3 行）

      // 為每個按鈕綁定點擊事件
      buttons.forEach(function(button) {
        button.addEventListener("click", function() {
          modal.style.display = "block"; // 顯示 Modal
        });
      });

【步驟 45】為關閉按鈕綁定點擊事件（3 行）

      // 為關閉按鈕綁定點擊事件，點擊後隱藏 Modal
      closeBtn.addEventListener("click", function() {
        modal.style.display = "none";
      });

【步驟 46】為整個視窗綁定點擊事件（3 行）

      // 為整個視窗綁定點擊事件：如果使用者點擊 Modal 背景（非內容區），則關閉 Modal
      window.addEventListener("click", function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      });

See the Pen 整合實作－表格按鈕觸發 Modal 彈出視窗 by 01 Scratchinai (@01-Scratchinai) on CodePen.

DeepSeek

以下是一個依循「每次新增不超過 12 行」原則的分步輸入參考流程，供您逐步累積這份完整程式碼。

※ 注意：當遇到成對標籤時，請先一次輸入完整的開閉標籤，再逐步補入內部內容。

【步驟 1】建立基本結構
先輸入文件類型與最外層架構（共 6 行）：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

【步驟 2】加入 head 的基本內容
在 <head> 裡依序加入 <base>、<title> 與 <link>（共 4 行）：

  <base href="/">
  <title>ChatGPT</title>
  <link href="https://chat.openai.com/favicon.ico" rel="icon" type="image/x-icon">

【步驟 3】加入空的 style 區塊
成對加入 <style> 區塊（共 2 行）：

  <style>
  </style>

【步驟 4】在 style 區塊中加入基本重置與 body 佈局
（共約 9 行）：

    /* 基本重置與佈局 */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial;
      line-height: 1.4;
      font-size: 16px;
      background: #343541;
      color: #ECECF1;
      display: flex;
    }

【步驟 5】加入 sidebar 的 CSS（下方聊天與設定區）
（共約 10 行）：

    /* 下方聊天與設定區 */
    .sidebar {
      width: 100%;
      height: 80px;
      background: #202123;
      padding: 15px;
      display: flex;
      flex-direction: row;
      position: fixed;
      bottom: 0;
      left: 0;
    }

【步驟 6a】加入 .new-chat-btn 與 .settings-btn 的部分屬性
（共 8 行）：

    .new-chat-btn, .settings-btn {
      margin-top: auto;
      width: 100%;
      padding: 12px;
      background: transparent;
      border: 1px solid #4A4B53;
      color: #ECECF1;
    }

【步驟 6b】補入 .new-chat-btn 與 .settings-btn 其他屬性
（共 7 行）：

    .new-chat-btn, .settings-btn {
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
    }

【步驟 7】加入按鈕 hover 狀態的 CSS
（共 5 行）：

    .new-chat-btn:hover, .settings-btn:hover {
      background: #2D2E35;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

【步驟 8】加入 SVG 圖示的外邊距設定
（共 1 行）：

    .new-chat-btn svg, .settings-btn svg { margin-right: 8px; }

【步驟 9】加入 .chats-list 的 CSS
（共 1 行）：

    .chats-list { flex: 1; overflow-y: auto; }

【步驟 10】加入 .chat-item 的 CSS
（共約 11 行）：

    .chat-item {
      padding: 12px 14px;
      margin-bottom: 5px;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 1.3;
      transition: all 0.2s ease;
    }

【步驟 11】加入 .chat-item:hover 狀態的 CSS
（共 5 行）：

    .chat-item:hover {
      background: #2D2E35;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

【步驟 12】加入 .chat-item.active 與 .delete-chat 的 CSS
（共約 6 行）：

    .chat-item.active { background: #343541; }
    .delete-chat {
      opacity: 0;
      color: #8E8EA0;
      cursor: pointer;
      padding: 5px;
    }

【步驟 13】設定 .chat-item:hover .delete-chat 的 CSS
（共 1 行）：

    .chat-item:hover .delete-chat { opacity: 1; }

【步驟 14】加入 .main-content 的 CSS
（共 4 行）：

    .main-content {
      flex: 1;
      height: calc(100vh - 80px);
      margin-bottom: 80px;
    }

【步驟 15】加入 .chat-container 的 CSS
（共約 11 行）：

    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
      padding: 20px;
      height: 100%;
      position: relative;
    }

【步驟 16】加入 .messages 與 .message 的 CSS
（分別約 5 行，每個）：

    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      margin-bottom: 20px;
    }

    .message {
      margin-bottom: 24px;
      padding: 16px;
      line-height: 1.75;
      font-size: 16px;
    }

【步驟 17】加入 .user-message 與 .assistant-message 的 CSS
（每個區塊各約 9 行）：

    .user-message {
      background: #343541;
      color: #ECECF1;
      width: 100%;
      padding: 24px;
      border-bottom: 1px solid rgba(32,33,35,0.5);
      border-radius: 16px;
      margin: 8px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .assistant-message {
      background: #444654;
      color: #D1D5DB;
      width: 100%;
      padding: 24px;
      border-bottom: 1px solid rgba(32,33,35,0.5);
      border-radius: 16px;
      margin: 8px 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

【步驟 18】加入 .input-container 的 CSS
（共約 11 行）：

    .input-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #343541;
      padding: 20px;
      display: flex;
      gap: 10px;
      max-width: 1000px;
      margin: 0 auto;
      border-bottom: 1px solid #4A4B53;
      z-index: 999;
    }

【步驟 19】加入 textarea 的 CSS（主體）
（共 12 行）：

    textarea {
      flex: 1;
      padding: 12px;
      border: 1px solid #4A4B53;
      border-radius: 12px;
      resize: none;
      height: 50px;
      background: #40414F;
      color: #ECECF1;
      font-size: 16px;
      line-height: 1.5;
      transition: all 0.2s ease;
    }

【步驟 20】加入 textarea 的 placeholder 與 hover 狀態
（共 2 行）：

    textarea::placeholder { color: #8E8EA0; }
    textarea:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

【步驟 21】加入 button 的基本與 hover、disabled 狀態 CSS
（共約 10 行）：

    button {
      padding: 10px 20px;
      background: #19C37D;
      color: white;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.3s, all 0.2s ease;
    }
    button:hover { background: #1A8870; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    button:disabled { background: #4A4B53; cursor: not-allowed; }

【步驟 22】加入 .typing-indicator 的 CSS
（共 6 行）：

    .typing-indicator {
      display: none;
      padding: 10px;
      background: #444654;
      border-radius: 12px;
      margin-bottom: 10px;
    }

【步驟 23】加入 .dot 與動畫（分兩部份）

【步驟 23a】.dot 主體（共 7 行）：

    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #8E8EA0;
      border-radius: 50%;
      margin-right: 3px;
      animation: bounce 1.4s infinite ease-in-out;
    }

【步驟 23b】nth-child 與 keyframes（共 5 行）：

    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
    }

【步驟 24】加入 .model-selector 的 CSS
（共 6 行）：

    .model-selector {
      border-radius: 12px;
      margin: 12px;
      padding: 16px;
      margin-bottom: 10px;
      display: none;
    }

【步驟 25】加入 select 元素的 CSS
（共約 11 行）：

    select {
      padding: 8px;
      border-radius: 12px;
      border: 1px solid #4A4B53;
      margin-left: 10px;
      background: #40414F;
      color: #ECECF1;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    select:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    select option { background: #40414F; color: #ECECF1; }

【步驟 26】加入 .error-message 的 CSS
（共 7 行）：

    .error-message {
      background: #442222;
      color: #FF4444;
      padding: 10px;
      border-radius: 12px;
      margin-bottom: 10px;
      display: none;
    }

【步驟 27】加入 .settings-modal 的 CSS
（共約 12 行）：

    .settings-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #202123;
      padding: 20px;
      border-radius: 16px;
      z-index: 1000;
      min-width: 300px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.24);
      transition: all 0.3s ease;
    }

【步驟 28】加入 .settings-modal h2 與 .modal-overlay 的 CSS
（分別 1 行與 7 行）：

    .settings-modal h2 { margin-bottom: 20px; color: #ECECF1; }

    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 999;
      transition: all 0.3s ease;
    }

【步驟 29】加入 .scroll-bottom-btn 的 CSS（分成兩部份）

【步驟 29a】主要屬性（共 8 行）：

    .scroll-bottom-btn {
      position: fixed;
      bottom: 100px;
      right: 30px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #19C37D;
      color: white;
    }

【步驟 29b】剩餘屬性（共 8 行）：

    .scroll-bottom-btn {
      border: none;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      z-index: 100;
    }

【步驟 30】加入 .scroll-bottom-btn:hover 與內部 svg 的 CSS
（共 5 行與 1 行）：

    .scroll-bottom-btn:hover {
      background: #1A8870;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }

    .scroll-bottom-btn svg { width: 20px; height: 20px; }

【步驟 31】加入捲軸樣式的 CSS
（共約 7 行）：

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(255,255,255,0.1);
    }
    ::-webkit-scrollbar-thumb:hover { background: #565869; }

（至此，style 區塊內容完成。）

【步驟 32】在 <body> 中加入 Sidebar 區塊（可分多步輸入，每次不超過 12 行）

範例——第一部分（共約 6 行）：

  <div class="sidebar">
      <button class="new-chat-btn" onclick="createNewChat()">
          <svg fill="none" height="16" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">

再分步補入按鈕內的 <path> 與結束標籤，以及接下來的元素，直到完整呈現 Sidebar（請依原程式碼逐步加入）。

【步驟 33】依同樣原則加入主要對話內容區（main-content）與其內部結構
例如：

  <div class="main-content">
      <div class="chat-container">
          <div class="error-message" id="errorMessage"></div>
          <div class="messages" id="messages"></div>
          <div class="typing-indicator" id="typingIndicator">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
          </div>
      </div>

再繼續分步加入輸入區（input-container）與按鈕。

【步驟 34】加入捲動按鈕、Modal 區塊與 Settings Modal 區塊
（依同樣原則，將每一區塊分解，每次新增不超過 12 行）

【步驟 35】在 <body> 底部加入 <script> 區塊
（先輸入成對 <script>：）

  <script>
  </script>

【步驟 36】於 <script> 中依序加入 JavaScript 程式碼
由最上方的全域變數與 API 金鑰、聊天資料、再依功能分段加入：

工具函式（scrollToBottom 等）
更新聊天列表、建立新聊天、刪除與切換聊天、更新訊息顯示等函式
sendMessage 函式與錯誤處理
鍵盤事件監聽、openSettings/closeSettings 以及 modalOverlay 點擊事件
localStorage 儲存與載入函式
取得模型（fetchModels）函式
平滑捲動及捲動事件判斷
初始化呼叫（fetchModels、loadChatsFromLocalStorage、updateChatsList、updateMessagesDisplay）

嵌入 WebSim 內容

ChatGPT-Assist-AI-Solving

搜尋此網誌

websim與GPT api

DeepSeek

讚
留言
分享

軟體工程薪資比較表

1/5 基礎表格

觀看參考答案

2/5 建立按鈕與事件處理

3/5 Modal（彈出視窗）的設計與 CSS 樣式

元素類型 - `<span>`：

內容 - `×`：

4/5 整合實作－表格按鈕觸發 Modal 彈出視窗

【步驟 1】建立基本結構

【步驟 2】加入主要區塊

【步驟 3】填入 `<head>` 內基本內容

【步驟 4】加入空的 `<style>` 區塊

表格樣式部分

Modal 樣式部分

HTML 表格區塊

Modal 彈出視窗區塊

JavaScript 程式碼部分

websim與GPT api

DeepSeek

讚留言分享

軟體工程薪資比較表

1/5 基礎表格

觀看參考答案

2/5 建立按鈕與事件處理

3/5 Modal（彈出視窗）的設計與 CSS 樣式

元素類型 - <span>：

內容 - &times;：

4/5 整合實作－表格按鈕觸發 Modal 彈出視窗

【步驟 1】建立基本結構

【步驟 2】加入主要區塊

【步驟 3】填入 <head> 內基本內容

【步驟 4】加入空的 <style> 區塊

表格樣式部分

Modal 樣式部分

HTML 表格區塊

Modal 彈出視窗區塊

JavaScript 程式碼部分

讚
留言
分享

元素類型 - `<span>`：

內容 - `×`：

【步驟 3】填入 `<head>` 內基本內容

【步驟 4】加入空的 `<style>` 區塊