HTML 與 CSS 審查程式設計教學

HTML 與 CSS 審查:版面錯誤與響應式修正

通常 15 分鐘內完成含修改次數品質檢查
方案
付款保障詳細資訊
  • 方案內的修改免費。
  • 若您在交付後 3 天內未回應,成果將自動驗收。

付款時款項會先保留,在您驗收後才會撥付。

HTML 與 CSS 審查:版面錯誤與響應式修正

成果範例

標準版方案範例

Code review: Python order-import script for a small online shop

What the code does

  1. Reads orders.csv from the shop export.
  2. For each order line, finds the product by SKU in stock.xlsx and subtracts the quantity.
  3. Writes the updated stock back and logs totals to import_log.txt.

The structure is clear and functions are well named. Most issues are about input that does not look the way the script expects.

Bugs and weak spots

#LineSeverityIssue
148HighThe same CSV can be imported twice; there is no check for already processed order IDs. This is the most likely cause of negative stock.
272Highint(row["qty"]) crashes on empty or "2.0" values from refunded orders.
395MediumSKU lookup is case-sensitive: "gt-101" and "GT-101" are treated as different products.
4130MediumThe file is opened without encoding="utf-8", so product names with accents break on Windows.
5201LowBare except: hides real errors and makes the log useless.

Corrected fragments

Issue 1: skip orders already imported

processed = load_processed_ids("processed_orders.txt")
for row in reader:
    if row["order_id"] in processed:
        continue
    # ... existing logic ...
    processed.add(row["order_id"])
save_processed_ids("processed_orders.txt", processed)

Why: each order is applied once, even if you run the script on the same file again.

Issue 2: read quantity safely

raw = (row.get("qty") or "").strip()
try:
    qty = int(float(raw))
except ValueError:
    log.warning("Order %s: bad quantity %r, skipped", row["order_id"], raw)
    continue

Why: refunded or partial lines are skipped with a clear note instead of stopping the whole import.

Issue 3: normalise SKUs

sku = row["sku"].strip().upper()

Apply the same .strip().upper() when building the stock dictionary.

Style and readability

  • process() is 90 lines long; split it into read_orders, apply_to_stock, write_report.
  • Replace magic column numbers (row[7]) with header names.

Please test each fix on a copy of your files: we read the code but did not run it.

Client: owner of a tea shop who wrote a 310-line Python script that imports orders from a CSV export into the stock spreadsheet Problem reported: "Sometimes stock goes negative, and the script crashes on some files."

客戶與所有細節皆為虛構。

關於此服務

版面錯誤通常歸因於幾個原因:在手機上溢出的固定寬度、設定錯誤的 flex 或 grid 容器、因堆疊上下文而失效的 z-index,或是互相衝突的媒體查詢。請貼上您的 HTML 與 CSS,並附上目前外觀與預期外觀的截圖,我們會說明版面為何跑掉,並提供修正後的 CSS。我們也會指出一些簡單的無障礙改善,例如替代文字、表單標籤與標題順序。

包含內容

  • 您會收到什麼在訂單頁面提供的書面審查:版面為何跑掉、適用於桌面與行動裝置的修正後 HTML 與 CSS 片段,以及無障礙說明。進階版另附將樣式表整理成可重複使用類別的計畫。
  • 版面修正Flexbox、grid 與溢出
  • 響應式規則互不衝突的媒體查詢
  • 堆疊與 z-index元素為何被其他元素遮住
  • 語意化 HTML標題、地標、按鈕
  • 無障礙基礎替代文字、標籤與對比

服務流程

  1. 1
    需求說明您貼上程式碼與截圖
  2. 2
    閱讀我們找出破壞版面的規則
  3. 3
    審查您會收到修正後的 CSS 與說明

需要您提供的資料

以文字貼上的 HTML 與 CSS、問題在桌面與手機上的截圖、發生問題的瀏覽器,以及預期的外觀。

我們會詢問您:

  • 是純 CSS 還是框架?
  • 在哪些螢幕尺寸與瀏覽器會壞掉?
  • 這個區塊應該長什麼樣子?
  • 頁面是用建站工具製作,還是手寫的?

比較方案

方案基本版100 行內標記US$15標準版400 行內標記US$35進階版1,000 行內並附樣式表計畫US$69
交付期限1 天2 天3 天
修改次數123
程式碼行數最多 100 行最多 400 行最多 1,000 行
修正片段有有有
樣式表整理計畫無無有
訂購 基本版訂購 標準版訂購 進階版

付款保障

下單時付款,但只有在驗收成果後,款項才會撥付。

  • 固定價格付款後,方案價格不會變動。
  • 款項先行保留付款時,金額只會先保留,在您驗收後才會撥付給服務。
  • 交付前檢查每份成果在交到您手上之前都會經過品質檢查,您也可以在驗收前於訂單頁面查看成果。
  • 免費修改在需求說明範圍內,可依方案允許的次數提出修改。
  • 3 天後自動驗收若您在交付後 3 天內未驗收也未提出修改,成果將自動驗收。若您在交付後於訂單聊天室留言,訂單會暫停自動驗收;我們回覆後,可能會重新起算 3 天,並會在聊天室中告知。
  • 重新製作或全額退款若成果不符合您的需求說明且修改後仍未改善,或製作時間超過交付期限的兩倍,請在訂單聊天室留言:我們將重新製作,或全額退還款項。
運作方式 →

常見問題

你們會在真實瀏覽器中檢查嗎?

不會,我們閱讀程式碼與您的截圖。發布前請在您的瀏覽器中確認修正後的 CSS。

可以修正用 Wix 或 Tilda 做的頁面嗎?

僅限您在其中加入的自訂程式碼。建站工具本身的版面是在其編輯器中控制,而非透過您能提供的程式碼。

這是完整的無障礙稽核嗎?

不是。我們會指出您提供的程式碼中明顯的問題;完整稽核需要在線上頁面使用螢幕閱讀器進行測試。

沒有找到您要的答案?

方案