先接任務，準備開始
每個入口，都有清楚的回饋。
保留已經有的狀態，親手讓焦點更清楚，再請AI只調主要連結hover。
這關帶走：專屬焦點與hover，各自實際操作。
步驟 3／6 · 觀念 18 分鐘
先學一招：前往別頁，仍然是連結
外觀像按鈕，不代表要換成button。
帶上你的裝備
- 首頁與作品頁的主要連結
<a class="primary-link" href="services.html">了解合作服務</a>a負責前往位置，button負責執行頁面動作。這次不新增無作用按鈕；手機要一直看得到內容，不能hover才顯示入口。
跟著觀察
- 指出首頁與作品頁的主要連結。
- 用Tab觀察現有焦點，再決定要改善的專屬樣式。
- 說明深底與淺色卡片的輪廓為何需分別挑色。
這是你的實際操作確認，小測不會替你勾選。
步驟 4／6 · 實作 42 分鐘
動手挑戰：先畫焦點，再改善hover
兩種操作都清楚，而且不改版面。
先準備
- 自己的 index.html、works.html、services.html 與完整共用 styles.css
- 修改前正常副本與自己的 Git 基準；不是教材原件
先親手加入下列兩個專屬焦點規則，再請AI只改善既有hover。原本就有全域焦點與hover，這次是精準調整，不刪除其他連結的保護。
.hero .primary-link:focus-visible {
outline:3px solid var(--white); outline-offset:4px;
}
.work-card .primary-link:focus-visible {
outline:3px solid var(--navy); outline-offset:4px;
}照這個順序開始
- 親手加入焦點規則，用Tab先測首頁與卡片。
- 用下方Prompt只把主要連結hover改亮紫底白字。
- 實際操作滑鼠、Tab、Shift+Tab、Enter；看窄版入口是否一直可用。
只改善主要連結 hover
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 index.html、works.html、services.html 與完整共用 styles.css
- 已親手加入專屬3px焦點、4px offset與第一張圖片位置的最新版CSS。
- 2．貼到哪裡
- 在 Cursor 開啟本關指定的自己的正常或獨立故障資料夾，進入內建 AI 對話。
- 用 @ 附上指定檔案，特別核對完整 styles.css、完整路徑；再貼實際證據與下方 Prompt。
- 先讀回覆與檔案差異，只保留指定範圍再儲存；Git 保存由自己核對後操作，AI 不代替驗收或提交。
- 3．預期回覆與操作
- 只調 .primary-link:hover 背景為亮紫、文字白色。
- 保留深底白色／淺卡深紫焦點輪廓、尺寸、圖片與所有內容。
- 4．自己檢查結果
- 滑鼠hover有回饋；實際Tab／Shift+Tab焦點可見，Enter開啟正確頁面。
- 手機不必hover也看得見全部內容與入口，APPA及卡片位置不跳動。
只改善主要連結 hover Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第 5 堂完成的青禾三頁 portfolio。保留已有的 hover 與焦點，這堂練精準改善，不移除起始功能。沿用 APPA 與既有 tokens：深底 #160e2c、深紫 #231146、亮紫 #6633ff、螢光綠 #caff33、淺紫 #e7deff、白 #ffffff。使用本機系統字型、既有圖片與三頁共用 styles.css；不增加框架或遠端素材。
本次任務：我已親手完成兩項設定：第一張作品圖 object-position:center top，以及 .hero .primary-link:focus-visible 使用 3px 白色輪廓、.work-card .primary-link:focus-visible 使用 3px 深紫輪廓，outline-offset 都為 4px。閱讀目前 HTML 與完整 CSS，只修改 .primary-link:hover，背景改 var(--violet)、文字改 var(--white)。保留未聚焦外觀、既有輪廓、圖片呈現、卡片尺寸、位置與間距，不動 APPA 或其他頁面內容。先給最小差異，說明這是改善既有 hover 而非從無到有。重要文字、連結與角色說明一直可見，手機不用懸停才能操作；讓我自己用滑鼠、Tab、Shift+Tab、Enter 及窄版逐項檢查，不執行 Git。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找位置與來源
深底用白輪廓，淺卡用深紫輪廓，分開看對比。
線索 2｜再縮小修改範圍
先用Tab確認手動焦點，再讓AI只改hover兩個顏色。
回到自己的作品，逐項檢查
- 焦點輪廓3px、offset4px，深底與淺卡都清楚。
- hover亮紫底白字，文字可見且位置／尺寸不跳動。
- 未實際完成的AI、Git、鍵盤或裝置檢查保持待完成。
尚未完成可以先往下看，之後再回來補做。
讓每一次修改，都有自己的理由。
先實際完成上面兩項確認，再寫下觀察、修改與結果；也可以先往下閱讀，之後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 6 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 6 堂六步勾選，筆記、另一堂進度與網站檔案保留。