指令範本-轉換成HTML

方案A：從零開始建立HTML教材

請幫我將這份數學補救教材製作成一個單一檔案的「響應式網頁 HTML 程式碼」。請符合以下設計規範：
  1. 小老師圖像設定（核心要求）：本教材固定使用「啾丸班長」當作小老師。請在網頁最上方（或合適的位置）加入這個小老師的頭像，圖片網址為：https://blogger.googleusercontent.com/img/a/AVvXsEhO924xqyRNnzKzKaAiXJZFNUJ0-pDkWGaqlFazQK6zJJiN4vuEs1idwmHjLnOpe_40y-r00qwIkvfZr9enRJUN8R1DrtAMG_5r7ii0jivYR_QABAWLEyWV-Db9gTn4TGFnvDWVTyxz7GZEEf_NbDpIfzgHPSrD2rWoDWJSEyN6BcYeBiqs_wJSr5MqwxLu=s190。請使用 CSS 將圖片寬度限制在 120px 左右，並搭配對話框樣式（例如：「啾丸班長小老師提示：...」），引導學生閱讀。
  2. 頁面比例與佈局：採用直式單欄佈局，適合手機與平板直向閱讀。左右兩側請設定 padding: 24px 的安全邊距。
  3. 字體大小（行動端優化）：
    • 大標題（h1）：36px 粗體
    • 核心觀念/題目（h2）：24px
    • 數學題目內文（p）：18px，行高設定 1.8
    • 解題步驟（ol/ul）：16px
  4. 數學公式處理：請在 HTML 的 <head> 中引入 MathJax 載入庫，確保分數、根號與方程式在手機上完美渲染。
  5. 教材內容：【請在這裡貼上您的數學題目與解題觀念】
請直接輸出完整的 <!DOCTYPE html> 程式碼，並將 CSS 樣式直接寫在 <style> 標籤內。

方案B：將Canvas內現有的教材轉換乘HTML

請將畫布中目前的數學教材內容，轉換為符合行動裝置（手機與平板）閱讀的 HTML 與 CSS 程式碼。轉換與新增要求：
  1. 加入小老師圖像：請在生成的網頁版面中，加入「啾丸班長」小老師圖像。圖片固定網址為：https://blogger.googleusercontent.com/img/a/AVvXsEhO924xqyRNnzKzKaAiXJZFNUJ0-pDkWGaqlFazQK6zJJiN4vuEs1idwmHjLnOpe_40y-r00qwIkvfZr9enRJUN8R1DrtAMG_5r7ii0jivYR_QABAWLEyWV-Db9gTn4TGFnvDWVTyxz7GZEEf_NbDpIfzgHPSrD2rWoDWJSEyN6BcYeBiqs_wJSr5MqwxLu=s190。請幫我設計一個精緻的區塊，讓啾丸班長以小老師的身份出現在網頁頂端（或以圓形圖示浮動在右下角），並帶出教學對話。
  2. 響應式排版：請將視覺排版轉換為響應式網頁（RWD），確保寬度在 375px 到 1024px 之間都能舒適閱讀。
  3. 字體與行高：將字體大小和行高轉換為網頁適用的單位（內文字體不小於 18px，行高不小於 1.8）
  4. 公式處理：對於數學公式，請使用支援 HTML 渲染的格式（例如引入 MathJax），防止公式在手機畫面上跑版。
  5. 請提供一個「可複製的單一 HTML 檔案」程式碼。


訂閱： 文章 (Atom)