數位行銷
程式設計開發
在本次工作日誌中,針對詢價清單程式進行了一系列修改和優化。
我們先修正了顯示問題,使按鈕固定在螢幕右上角,確保使用者在任何滾動情況下都能看到。
接下來調整了圖片的顯示邏輯,解決了圖片消失的問題。
再針對條件判斷和樣式應用進行了優化,避免了不必要的字符和潛在錯誤。
這些修改不僅提升了程式的穩定性和使用體驗,還增加了程式的可維護性,確保未來的擴展和更新更加順利。
在不改html及程式的情況下用css修改網頁的好處有哪些?
-
保持結構完整性:
不改 HTML 結構和程式碼,避免了對網頁的結構和功能造成影響。
這樣可以確保網頁的核心邏輯和動作不被意外破壞。 -
提高效率:
修改 CSS 通常比修改 HTML 和程式碼更簡單和快速,特別是在涉及大量頁面或內容時。
CSS 可以集中控制樣式,大大減少工作量和出錯機率。 -
樣式分離:
CSS 將樣式與內容分離,這是一個良好的程式碼實踐。
這樣可以更清晰地整理代碼,使其更易於維護和更新。 -
響應式設計:
透過 CSS 可以實現響應式設計,讓網頁在不同設備和螢幕尺寸上都能有良好的顯示效果。
這樣可以提升用戶體驗,而不需要修改 HTML 結構。 -
全面修改:
CSS 可以全面應用於多個頁面。如果需要修改一個樣式,只需在 CSS 文件中修改一次,就能應用到所有引用該樣式的頁面上。 -
提升性能:
分離的 CSS 文件可以被瀏覽器緩存,提高頁面的加載速度。
而且,CSS 的解析速度通常比內聯樣式或嵌入式樣式更快。 -
方便測試和調試:
瀏覽器的開發者工具可以方便地即時編輯和測試 CSS,
幫助快速調整測試和優化樣式,而不需要重新部署整個網站。
透過 CSS 修改網頁樣式,既能保持代碼整潔和結構穩定,又能有效提高開發效率和網頁性能。
相關文章請參考:
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檔。
這個代碼做了以下工作:
- 等待整個文檔載入完成後執行代碼。
- 查找 .djc_form_addtocart、.djc_introtext 和 .djc_fulltext 元素。
- 將 .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; }
在這個示例中:
- 設置 .djc_fulltext 為 position: relative,以便偽元素 ::before 可以相對於它進行定位。
- 使用 ::before 偽元素來創建一條水平線。
- content: "" 表示偽元素將包含一個空的內容。
- display: block 使偽元素呈現為一個塊級元素。
- width: 100% 和 height: 1px 設置了水平線的寬度和高度。
- background-color: #000 設置水平線的顏色,你可以根據需要更改顏色。
- position: absolute 將偽元素定位到 .djc_fulltext 的頂部。
- top: 0 和 left: 0 確保偽元素位於 .djc_fulltext 元素的頂部。
這樣就可以在 .djc_fulltext 元素的頂部添加一條水平線,並保持原有的 padding-top: 120px 樣式。
5. 使圖片垂直水平置中,並設定高度
要使 .djc_mainimage 內的圖片在容器中垂直和水準居中,可以使用多種方法。以下是一些常見的方法:
使用 Flexbox
這是最簡單和最常用的方法之一。
.djcatalog .djc_mainimage {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center;
overflow: hidden;
height: 522px;
border: 1px solid #f5f5f5;
}
使用 Grid 佈局
這是另一種強大且靈活的方法。
.djcatalog .djc_mainimage {
display: grid;
place-items: center; /* 垂直和水平居中 */
text-align: center;
overflow: hidden;
height: 522px;
border: 1px solid #f5f5f5;
}
使用 Position 和 Transform
如果你不想使用 Flexbox 或 Grid,可以嘗試使用 position 和 transform 方法。
.djcatalog .djc_mainimage {
position: relative;
text-align: center;
overflow: hidden;
height: 522px;
border: 1px solid #f5f5f5;
}
.djcatalog .djc_mainimage img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意事項
確保圖片元素沒有設置 float 或其他影響定位的樣式。如果有,需要移除這些樣式或調整樣式以適應居中效果。
以上任何一種方法都可以使圖片在 .djc_mainimage 容器中垂直和水準居中。選擇適合你項目需求的方法。
6. 如何將右上方的詢價清單圖示作為背景,而圖上出現詢價清單的數量?
在你的程式碼中,你想要確保在
empty($items)
為 true 時隱藏 .mod_djc2_cart_contents
元素。這樣可以避免出現多餘的字符。我將幫你改進這段程式碼,使其更簡潔且易於維護。.mod_djc2cart {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.mod_djc2cart_is_empty,
.mod_djc2cart_info {
position: absolute;
top: 0;
left: 0;
background-color: white;
padding: 5px;
7. 要如何在不改html的情況下更改網頁的排列順序?
要在不改變 HTML 結構的情況下,使價格區塊 .djc_price 先出現,您可以使用 Flexbox 或 Grid 布局來重新排列 .djc_item_info 內部元素的順序。
這些方法可以透過 CSS 實現,而不需改變 HTML:
使用 Flexbox 方法:
.djc_item_info {
display: flex;
flex-direction: column;
}
.djc_price {
order: -1; /* 將價格區塊移至第一個位置 */
}
使用 Grid 方法:
.djc_item_info {
display: grid;
grid-template-columns: 1fr; /* 單列布局 */
grid-template-rows: auto; /* 自動調整行高 */
gap: 10px; /* 根據需要調整間距 */
}
.djc_price {
grid-column: 1; /* 將價格區塊放在第一列 */
grid-row: 1; /* 放在第一行 */
}
這些 CSS 會重新排列 .djc_item_info
內的元素,使 .djc_price
元素出現在最前面,而不需改動原始的 HTML 結構。
網頁設計 問與答:
SEO 及 廣告投放 問與答 https://des13.com/faq/seo.html
網站建置 報價相關 https://des13.com/faq/quote.html
網站建置 技術相關 https://des13.com/faq/webtech.html
購物網站 網路開店 https://des13.com/faq/e-commerce.html
B2B形象官網建置 https://des13.com/faq/b2b.html
網站升級維護 https://des13.com/faq/upgrade.html
推薦閱讀:omo跨境品牌電子商務購物網站 全後台模組化形象官網
簡易電子書下載:一頁式網頁設計電子書
如果您喜歡我們的文章,歡迎分享!
也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網,符合各式商業模式與需求,請參考:https://des13.com/service/rwd.html
Written by 益盛科技
作者:益盛科技 程式設計部門