AI 商用網站開發跟著步驟，做出自己的作品
返回任務地圖

字還在，為什麼看不到？

第 8 堂 · 第 3／3 關 · 觀念 18 分鐘＋實作 42 分鐘

查看本堂完整六步
先接任務，準備開始

這次先看換行，不重做整張卡片。

APPA用放大鏡把字體、卡片寬度與禁止換行分開，陪你找出真正原因。

這關帶走：完成局部除錯，交出可重現的四尺寸紀錄。

步驟 5／6 · 觀念 18 分鐘

先學一招：禁止換行與固定寬度是不同原因

找出讓長標題超出的white-space規則。

帶上你的裝備

  • 獨立fault-L08的三頁HTML與完整CSS
  • 320px正常／異常、長標題Computed white-space與來源、元素寬度

前一堂卡片固定寬度，這次卡片寬度正常，但末端white-space:nowrap禁止長標題換行。先看Computed與規則來源，再修，不用縮字來掩蓋。

.works-grid > .work-card:first-child h3 { white-space:nowrap; }

跟著觀察

  1. 在正常版320px看完整長標題。
  2. 在獨立副本重現不換行，對照卡片與h3寬度。
  3. 說出與第7堂400px卡片故障的差別。
卡片寬度正常、長標題不換行，要先看？

選一個試試看，答錯也可以再試。

這是你的實際操作確認，小測不會替你勾選。

步驟 6／6 · 實作 42 分鐘

動手挑戰：字還在，為什麼看不到？

完成局部除錯，交出可重現的四尺寸紀錄。

先準備

  • 獨立fault-L08的三頁HTML與完整CSS
  • 320px正常／異常、長標題Computed white-space與來源、元素寬度
取得獨立故障練習包

自己先寫重現步驟、長標題元素與white-space來源，再使用修正Prompt。

照這個順序開始

  1. 獨立fault-L08重現，保留正常來源與截圖。
  2. 請AI定位並只移除末端nowrap注入區塊。
  3. 重跑四尺寸、斷點邊界、六個服務入口與Tab／Shift+Tab／Enter。

救回被禁止換行的長標題

主要使用 Cursor 內建 AI；先附資料，再送出指令。

1．附上這些檔案與資料
  • 獨立fault-L08的三頁HTML與完整CSS
  • 320px正常／異常、長標題Computed white-space與來源、元素寬度
2．貼到哪裡
  1. 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
  2. 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
  3. 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
3．預期回覆與操作
  • 定位禁止換行來源，只移除一個故障區塊。
  • 保留長標題全文、網址換行與所有既有功能。
4．自己檢查結果
  • 36字標題完整換行，320／390無水平溢出。
  • 六張資料、圖片、斷點與服務入口重驗正常。
救回被禁止換行的長標題 Prompt（可收合）

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第7堂六張作品、600／1024斷點與16／24間距。保留APPA、紫綠tokens與既有鍵盤焦點。提供36字標題「小型工作室品牌與網站作品整理計畫讓手機平板桌面都能清楚閱讀每一項服務資訊」、一張600×900直幅圖與一張1200×500橫幅圖及範例長網址。這些皆為教學素材，並非真實客戶成果。中文標題與contain原已可用，不假設全部都會壞；先觀察長網址段落是否超寬。

本次任務：獨立故障版只有第一張作品的36字h3在320px不換行。依DOM、Computed與完整CSS確認末端.works-grid > .work-card:first-child h3的white-space:nowrap，只移除這一個故障區塊，恢復原正常換行。不刪或縮短標題、不改字級、網格、長網址wrap、圖片、APPA，不用!important或隱藏body溢出。提供最小差異，區分已確認原因與待實測，列320／390／768／1280、邊界欄數及六個入口的真實鍵盤回歸。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。
Cursor AI 無法使用？改用 ChatGPT 備援

把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。

收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。

兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。

複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。

卡住時，APPA 給你一點線索

線索 1｜先找現象與證據

確認Computed white-space是nowrap，不只盯卡片寬度。

線索 2｜再縮小修改範圍

只移除末端同一個故障區塊，網址換行規則保留。

回到自己的作品，逐項檢查

  • 36字標題完整換行，320／390無水平溢出。
  • 六張資料、圖片、斷點與服務入口重驗正常。
  • 未實際完成的AI、發布或裝置驗收記待完成。
需要對照？看這一關的參考成果

先檢查自己的作品，再對照差異。開啟參考不會算完成。

對照這一步的結果（另開分頁）

尚未完成可以先往下看，之後再回來補做。

你能用證據，說明這次修好了什麼。

保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。

進入第 9 堂：把卡片搬進資料返回上一關：只修真正出問題的地方

關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。

留下自己的檢查紀錄

這是第 8 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。

重設會清除第 8 堂六步勾選，筆記、另一堂進度與網站檔案保留。