在本次工作日誌中，針對詢價清單程式進行了一系列修改和優化。

我們先修正了顯示問題，使按鈕固定在螢幕右上角，確保使用者在任何滾動情況下都能看到。

接下來調整了圖片的顯示邏輯，解決了圖片消失的問題。

再針對條件判斷和樣式應用進行了優化，避免了不必要的字符和潛在錯誤。

這些修改不僅提升了程式的穩定性和使用體驗，還增加了程式的可維護性，確保未來的擴展和更新更加順利。

在不改html及程式的情況下用css修改網頁的好處有哪些？

1. 保持結構完整性：
   不改 HTML 結構和程式碼，避免了對網頁的結構和功能造成影響。
   這樣可以確保網頁的核心邏輯和動作不被意外破壞。

2. 提高效率：
   修改 CSS 通常比修改 HTML 和程式碼更簡單和快速，特別是在涉及大量頁面或內容時。
   CSS 可以集中控制樣式，大大減少工作量和出錯機率。

3. 樣式分離：
   CSS 將樣式與內容分離，這是一個良好的程式碼實踐。
   這樣可以更清晰地整理代碼，使其更易於維護和更新。

4. 響應式設計：
   透過 CSS 可以實現響應式設計，讓網頁在不同設備和螢幕尺寸上都能有良好的顯示效果。
   這樣可以提升用戶體驗，而不需要修改 HTML 結構。

5. 全面修改：
   CSS 可以全面應用於多個頁面。如果需要修改一個樣式，只需在 CSS 文件中修改一次，就能應用到所有引用該樣式的頁面上。

6. 提升性能：
   分離的 CSS 文件可以被瀏覽器緩存，提高頁面的加載速度。
   而且，CSS 的解析速度通常比內聯樣式或嵌入式樣式更快。

7. 方便測試和調試：
   瀏覽器的開發者工具可以方便地即時編輯和測試 CSS，
   幫助快速調整測試和優化樣式，而不需要重新部署整個網站。

透過 CSS 修改網頁樣式，既能保持代碼整潔和結構穩定，又能有效提高開發效率和網頁性能。

相關文章請參考：

專業網站 軟體開發 ：探索 程式設計 四階段工作流程

軟體開發規格書的重要性

程式設計開始前-多重視圖

階層式設計

脈絡驅動設計1-需求設計

脈絡驅動設計2-工程設計

1. 不動不改html的結構 , 僅靠 css 修改

要怎麼修改 <input> 元素的 margin-left 屬性呢？

代碼：

<input type="text" name="quantity" class="djc_qty_input input input-mini" value="1" data-type="int" data-min="1" data-max="0" data-step="1.0000" data-precision="0" data-unit="pc" size="3" maxlength="3"> 

要僅通過CSS來設定<input>元素的margin-left屬性，你可以這樣做：

.djc_qty_input {
margin-left: 0px;
}

這樣的CSS規則會應用到所有具有.djc_qty_input類名的元素上，將其左邊距設置為0px。

2. 刪除小數點後2位要怎麼改

價格預設會有小數點後兩位，並且貨幣符號在價格之後，要改成台灣用法，先是貨幣符號，數字有千分位方便讀取，刪除小數點後2位要怎麼改？

原代碼：
$priceHtml = '<span class="djc_price_value">'.($params->get('unit_side') == '1' ? $prefix : '').number_format($price, $params->get('decimals',2), $price_decimal_separator, $price_thousands_separator).'</span>';
$unitHtml = '<span class="djc_price_unit">'.($params->get('unit_side') == '1' ? '' : $prefix).$unit.'</span>';

要在數字顯示中添加千分位逗點，你可以使用 number_format 函數，它支持自動添加千分位逗點。這個函數的第四個參數指定了千分位分隔符號。

顯示的價格包含 $ 貨幣符號，數字會包含千分位逗點且不顯示小數位數，代碼如下：

$priceHtml = '<span class="djc_price_value">'.($params->get('unit_side') == '1' ? $prefix : '').'$'.number_format($price, 0, '.', ',').'</span>';
$unitHtml = '<span class="djc_price_unit">'.($params->get('unit_side') == '1' ? '' : $prefix).$unit.'</span>';

3. 屬性順序不使用html，僅使用css怎麼修改？

 .djc_form_addtocart 要改到.djc_introtext之後在.djc_fulltext之前， 在不動到html的狀況下, 要怎麼修改css?

將以下JavaScript代加到頁面的 <script> 中，或者在適當的位置引入一個JavaScript檔。

這個代碼做了以下工作：

1. 等待整個文檔載入完成後執行代碼。
2. 查找 .djc_form_addtocart、.djc_introtext 和 .djc_fulltext 元素。
3. 將 .djc_form_addtocart 元素插入到 .djc_fulltext 元素之前。

這種方法將 .djc_form_addtocart 表單移動到 .djc_introtext 之後，.djc_fulltext 之前，確保元素順序按需求調整。

document.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector('.djc_form_addtocart');
var introText = document.querySelector('.djc_introtext');
var fullText = document.querySelector('.djc_fulltext');

if (form && introText && fullText) {
introText.parentNode.insertBefore(form, fullText);
}
});

4. 要怎麼在全文描述上加一個水平線，與商品規格作區別？

要在現有的CSS規則 #djcatalog.djc_item .djc_fulltext 上添加一條水平線（<hr>），可以使用CSS中的偽元素來實現。偽元素 ::before 或 ::after 可以在元素的前面或後面插入內容。

下面是一個示例代碼，將一條水平線添加到 .djc_fulltext 元素的頂部，並保持原有的 padding-top 樣式：

#djcatalog.djc_item .djc_fulltext { padding-top: 120px; position: relative; } #djcatalog.djc_item .djc_fulltext::before { content: ""; display: block; width: 100%; height: 1px; background-color: #000;  position: absolute; top: 0; left: 0; }

在這個示例中：

1. 設置 .djc_fulltext 為 position: relative，以便偽元素 ::before 可以相對於它進行定位。
2. 使用 ::before 偽元素來創建一條水平線。
3. content: "" 表示偽元素將包含一個空的內容。
4. display: block 使偽元素呈現為一個塊級元素。
5. width: 100% 和 height: 1px 設置了水平線的寬度和高度。
6. background-color: #000 設置水平線的顏色，你可以根據需要更改顏色。
7. position: absolute 將偽元素定位到 .djc_fulltext 的頂部。
8. top: 0 和 left: 0 確保偽元素位於 .djc_fulltext 元素的頂部。

這樣就可以在 .djc_fulltext 元素的頂部添加一條水平線，並保持原有的 padding-top: 120px 樣式。