整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頁切圖過程中div+css命名規(guī)則
標(biāo)簽屬性命名規(guī)范 (建議)
下劃線連接符命名法“hello_world”
中杠 連接符命名法“hello-world”
駱駝式命名法“helloWorld”
內(nèi)容：content/container 導(dǎo)航：nav 側(cè)欄：sidebar
欄目：column 標(biāo)志：logo 頁面主體：main
廣告：banner 熱點：hot 新聞：news
下載：download 子導(dǎo)航：subnav 菜單：menu
搜索：search 頁腳：footer 滾動：scroll
版權(quán)：copyright 友情鏈接：friendlink 子菜單：submenu
內(nèi)容：content 標(biāo)簽頁：tab 文章列表：list
注冊：regsiter 提示信息：msg 小技巧：tips
加入：joinus 欄目標(biāo)題：title 指南：guild
服務(wù)：service 狀態(tài)：status 投票：vote
尾：footer 合作伙伴：partner 登錄條：loginbar
頁面外圍控制整體布局寬度：wrapper 左右中：left right center
(二)注釋的寫法:
/* Footer */
內(nèi)容區(qū)
/* End Footer */
(三)id(具有唯一性)的命名:
(1)頁面結(jié)構(gòu)
容器: container 頁頭：header 內(nèi)容：content/container
頁面主體：main 頁尾：footer 導(dǎo)航：nav
側(cè)欄：sidebar 欄目：column 左右中：left right center
頁面外圍控制整體布局寬度：wrapper
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
(四)class的命名:
(1)顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項:
1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線; （我倒是經(jīng)常加）
4.盡量不縮寫，除非一看就明白的單詞. （偷懶經(jīng)常縮寫）
主要的 master.css 模塊 module.css 基本共用 base.css
主題 themes.css 專欄 columns.css 打印 print.css
文字 font.css 表單 forms.css 補丁 mend.css
布局，版面 layout.css
何向訪客“廣而告之”Shopify商店的重大促銷活動和消息通知？這點在即將到來的“黑五”“網(wǎng)一”大促面前顯得尤為重要。
Shopify公告欄就是一種簡單而有效的方法，確保客戶在進店時能夠及時看到商店的促銷活動和折扣代碼。
此外，公告欄在其他情況下也很實用，例如顯示重要的發(fā)貨信息、展示新的會員計劃以及賣家想要呈現(xiàn)給客戶的任何內(nèi)容。
本文將以圖文的形式向你演示如何使用Liquid來構(gòu)建公告欄，從而擴展自定義主題的功能或提供客戶服務(wù)。
在開始創(chuàng)建公告欄之前，你需要確定公告欄中需要包含的元素類型（如文本、標(biāo)題等）。以下是你可以在其中添加的一些元素：
?文本
?超鏈接
?顏色
?字體大小
?復(fù)選框
此教程展示的公告欄涉及選擇背景、文本顏色、添加文本以及嵌入超鏈接的設(shè)置。通過使用Liquid（一門開源的模板語言，由 Shopify創(chuàng)造并用 Ruby 實現(xiàn)。它被稱為“Shopify主題的骨骼”，并且被用于加載店鋪系統(tǒng)的動態(tài)內(nèi)容）的會話對象，你可以進入主題編輯器進行設(shè)置，包括標(biāo)題文本、鏈接URL并選擇你要顯示的圖像。
首先，你需要在主題的/sections目錄中創(chuàng)建一個名為“announcement-bar.liquid”的新文件，從而得到一個位于標(biāo)題上方的新的會話。
創(chuàng)建此會話文件后，你可以添加包含公告消息以及與會話設(shè)置相對應(yīng)的if語句的基本標(biāo)記：
以下操作實現(xiàn)的是一個“當(dāng)訪客執(zhí)行特定操作時才會展示的公告欄”。如果你希望你的公告欄僅在網(wǎng)站主頁出現(xiàn)，那么你還可以添加一個復(fù)選框，因為客戶可能并不希望此消息出現(xiàn)在商店的每個頁面上。在你已經(jīng)添加HTML的下方，添加以下模式標(biāo)記和JSON：
如圖所示，JSON數(shù)組中的ID
在這種情況下，主題編輯器上將出現(xiàn)一個復(fù)選框，如果選中該復(fù)選框，將顯示公告內(nèi)的元素和消息。此外，還將出現(xiàn)第二個復(fù)選框，使你可以在非主頁頁面上隱藏公告欄。
如果你希望在公告欄中出現(xiàn)文本和超鏈接，你可以添加支持訪問文本字段和URL值的對象。同樣，如果你不需要它們，你可以使用if語句來隱藏這些內(nèi)容：
一旦你在schema標(biāo)簽中創(chuàng)建了相應(yīng)的值，這兩個新的section.settings對象將使你能夠創(chuàng)建用于添加文本和URL的選項。兩者都有特定的輸入類型，分別是text和url，它們將在主題編輯器中生成對應(yīng)選項：
你在本會話中要添加的最后一項是為公告欄添加用于選擇背景和文本顏色的選項。而且，你可以根據(jù)架構(gòu)標(biāo)記中的值來調(diào)整主題的CSS。例如，你可以創(chuàng)建“color（顏色）”設(shè)置，該設(shè)置會將選定的顏色值發(fā)送到CSS屬性。
以本文為例，將出現(xiàn)如下所示的會話設(shè)置：
你可以將公告欄選定默認的黑色，當(dāng)你在主題編輯器上查看時，你將看到一個顏色選擇器工具。announcement_bar_color ID將被會話中的
現(xiàn)在，由主題編輯器上的顏色選擇器選擇的十六進制代碼是通過section.settings.announcement_bar_color屬性值表示的，因此你能夠輕松調(diào)整顏色。設(shè)置公告欄文本的顏色也可以采用相同的方法。
然后，你還可以在你的
上雨果網(wǎng)搜索“跨境資料庫”,領(lǐng)取歐美/東南亞各國市場商機、各大平臺熱銷品報告、跨境電商營銷白皮書！
Query UI 包括一個強大的 CSS 框架，用于創(chuàng)建自定義的 jQuery 小部件。該框架包括涵蓋廣泛的公共用戶界面需求的 Class，并且可以使用 jQuery UI ThemeRoller 進行操縱。通過使用 jQuery UI CSS 框架創(chuàng)建您自己的 UI 組件，您應(yīng)采用共享標(biāo)記公約，便于插件社區(qū)的代碼集成。您可以查看 jQuery UI 主題 了解更多詳情。
| API | 描述 |
|---|---|
| CSS 框架（CSS Framework） | jQuery UI 使用的允許組件主題化的 Class 名稱列表。 |
| 圖標(biāo)（Icons） | jQuery UI 提供的圖標(biāo)列表。 |
| 堆疊元素（Stacking Elements） | 一種處理 z-index 和堆疊元素的模式。 |
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
