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

找出蓋掉設定的那一行

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

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

先找生效來源，再動手修。

設定看起來正確，畫面卻變小。在獨立副本比對來源，找到真正蓋掉它的規則。

這關帶走：解釋覆蓋原因，救回48／32px主標。

步驟 5／6 · 觀念 18 分鐘

先學一招：為什麼設定了卻沒生效

比較作用範圍與順序，先找原因。

帶上你的裝備

  • 目前完整CSS與Styles／Computed
.hero h1 { font-size:48px; }
/* 若同等選擇器較後又定義字級，要看實際來源 */

先比較是否真的選到同一元素與同等規則；不同選擇器不能只看誰寫在後面。這次不使用 !important 掩蓋問題。

跟著觀察

  1. 找出首頁桌面與窄版的正常主標規則。
  2. 在指定寬度確認實際生效來源。
  3. 記下預期值，再準備獨立故障副本。
同等條件且相同選擇器，後方又寫另一個字級時？

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

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

步驟 6／6 · 實作 42 分鐘

動手挑戰：救回變小的主標

用完整證據，修一個覆蓋區塊。

先準備

  • 獨立 fault-L05/portfolio；正常來源先保留
取得主標故障包開啟覆蓋故障指南

把故障包內portfolio另放student-work/fault-L05/portfolio。先在桌面及窄版重現主標20px，記下來源後再請AI協助；不拿正常完成版整份覆蓋。

照這個順序開始

  1. 重現問題，附視窗寬度、完整CSS與生效來源。
  2. 先讀AI原因與最小修正，只處理故障區塊。
  3. 逐頁與兩尺寸重驗、寫本堂筆記，親手保存修復結果。

找出主標被蓋掉的原因

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

1．附上這些檔案與資料
  • 獨立 fault-L05/portfolio 的三頁 HTML、完整 CSS，不附正常來源
  • 實際寬度與Computed主標20px、Styles中對應來源；記下桌面48px／窄版32px的預期。
2．貼到哪裡
  1. 在 Cursor 開啟本關指定的自己的正常或獨立故障資料夾，進入內建 AI 對話。
  2. 用 @ 附上指定檔案，特別核對完整 styles.css、完整路徑；再貼實際證據與下方 Prompt。
  3. 先讀回覆與檔案差異，只保留指定範圍再儲存；Git 保存由自己核對後操作，AI 不代替驗收或提交。
3．預期回覆與操作
  • 先指出同一選擇器較後規則覆蓋，僅修故障的那個區塊。
  • 不加 !important、不重寫整份CSS、不把完成版整份覆蓋。
4．自己檢查結果
  • 故障副本主標恢復桌面48／窄版32px，其他三頁樣式保持正常。
  • 只刪除或修正故障區塊，正常來源沒有改；自己重驗並記原因。
找出主標被蓋掉的原因 Prompt（可收合）

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

情境與本次輸入：承接第 4 堂正常青禾三頁 portfolio，先保留修改前副本與自己的 Git 基準。沿用 APPA 與既有 tokens：深底 #160e2c、深紫 #231146、亮紫 #6633ff、螢光綠 #caff33、淺紫 #e7deff、白 #ffffff。使用本機系統字型、既有圖片與三頁共用 styles.css；不增加框架或遠端素材。

本次任務：我在獨立 fault-L05/portfolio 重現：首頁主標應是桌面 48px、699px 以下 32px，卻都顯示 20px。請閱讀三頁 HTML、完整 CSS 順序、實際視窗寬度、Computed 字級與對應來源截圖，找出同一 .hero h1 選擇器較後出現的覆蓋原因。先解釋生效規則，再只移除或修正故障的那個覆蓋區塊，恢復原有桌面與窄版設定；不加 !important、不改正常來源、不重做樣式。列出三頁、兩尺寸、字級、服務卡片、APPA 與主要連結的回歸檢查，實際操作由我完成，未做保持待測。

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

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

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

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

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

卡住時，APPA 給你一點線索

線索 1｜先找位置與來源

先記視窗寬度與實際20px，不只截整頁。

線索 2｜再縮小修改範圍

只修故障區塊，確認桌面與窄版都恢復。

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

  • 主標恢復48／32px，服務卡片與APPA正常。
  • 只有故障區塊改動，能指出原生效規則與原因。
  • 未實際完成的AI、Git、鍵盤或裝置檢查保持待完成。
需要對照？看這一關的參考成果

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

對照正常首頁（另開分頁）

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

讓每一次修改，都有自己的理由。

先實際完成上面兩項確認，再寫下觀察、修改與結果；也可以先往下閱讀，之後補做。

進入第 6 堂：替作品整理一致的展示方式返回上一關：留白改在哪裡，效果就不同

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

留下自己的檢查紀錄

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

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