頁切圖過程中div+css命名規則

標簽屬性命名規范 (建議)

下劃線連接符命名法“hello_world”

中杠 連接符命名法“hello-world”

駱駝式命名法“helloWorld”

　　內容：content/container 導航：nav 側欄：sidebar 　 　
　　欄目：column 標志：logo 頁面主體：main 　　
　　廣告：banner 熱點：hot 新聞：news
　　下載：download 子導航：subnav 菜單：menu
　　搜索：search 頁腳：footer 滾動：scroll
　　版權：copyright 友情鏈接：friendlink 子菜單：submenu
　　內容：content 標簽頁：tab 文章列表：list
　　注冊：regsiter 提示信息：msg 小技巧：tips
　　加入：joinus 欄目標題：title 指南：guild
　　服務：service 狀態：status 投票：vote
　　 尾：footer 合作伙伴：partner 登錄條：loginbar
　　頁面外圍控制整體布局寬度：wrapper 左右中：left right center 　　
　　
　　(二)注釋的寫法:
　　/* Footer */
　　內容區
　　/* End Footer */
　　
　　(三)id(具有唯一性)的命名:
　　
　　(1)頁面結構
　　容器: container 頁頭：header 內容：content/container
　　頁面主體：main 頁尾：footer 導航：nav
　　側欄：sidebar 欄目：column 左右中：left right center
　　頁面外圍控制整體布局寬度：wrapper
　　(2)導航
　　導航：nav
　　主導航：mainbav
　　子導航：subnav
　　頂導航：topnav
　　邊導航：sidebar
　　左導航：leftsidebar
　　右導航：rightsidebar
　　菜單：menu 子菜單：submenu 標題: title 摘要: summary
　　
　　(3)功能
　　標志：logo
　　廣告：banner
　　登陸：login
　　登錄條：loginbar
　　注冊：regsiter
　　搜索：search
　　功能區：shop
　　標題：title
　　加入：joinus
　　狀態：status
　　按鈕：btn
　　滾動：scroll
　　標簽頁：tab
　　文章列表：list
　　提示信息：msg
　　當前的: current
　　小技巧：tips
　　圖標: icon
　　注釋：note
　　指南：guild
　　服務：service
　　熱點：hot
　　新聞：news
　　下載：download
　　投票：vote
　　合作伙伴：partner
　　友情鏈接：link
　　版權：copyright
　　
　　(四)class的命名:
　　(1)顏色:使用顏色的名稱或者16進制代碼,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
　　(2)字體大小,直接使用"font+字體大小"作為名稱,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　(3)對齊樣式,使用對齊目標的英文名稱,如
　　.left { float:left; }
　　.bottom { float:bottom; }
　　(4)標題欄樣式,使用"類別+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }
　　
　　注意事項:
　　1.一律小寫;
　　2.盡量用英文;
　　3.不加中杠和下劃線; （我倒是經常加）
　　4.盡量不縮寫，除非一看就明白的單詞. （偷懶經常縮寫）
　　主要的 master.css 模塊 module.css 基本共用 base.css
　　主題 themes.css 專欄 columns.css 打印 print.css
　　文字 font.css 表單 forms.css 補丁 mend.css
　　布局，版面 layout.css

何向訪客“廣而告之”Shopify商店的重大促銷活動和消息通知？這點在即將到來的“黑五”“網一”大促面前顯得尤為重要。

Shopify公告欄就是一種簡單而有效的方法，確保客戶在進店時能夠及時看到商店的促銷活動和折扣代碼。

此外，公告欄在其他情況下也很實用，例如顯示重要的發貨信息、展示新的會員計劃以及賣家想要呈現給客戶的任何內容。

本文將以圖文的形式向你演示如何使用Liquid來構建公告欄，從而擴展自定義主題的功能或提供客戶服務。

創建新的公告欄

在開始創建公告欄之前，你需要確定公告欄中需要包含的元素類型（如文本、標題等）。以下是你可以在其中添加的一些元素：

?文本

?超鏈接

?顏色

?字體大小

?復選框

此教程展示的公告欄涉及選擇背景、文本顏色、添加文本以及嵌入超鏈接的設置。通過使用Liquid（一門開源的模板語言，由 Shopify創造并用 Ruby 實現。它被稱為“Shopify主題的骨骼”，并且被用于加載店鋪系統的動態內容）的會話對象，你可以進入主題編輯器進行設置，包括標題文本、鏈接URL并選擇你要顯示的圖像。

首先，你需要在主題的/sections目錄中創建一個名為“announcement-bar.liquid”的新文件，從而得到一個位于標題上方的新的會話。

創建此會話文件后，你可以添加包含公告消息以及與會話設置相對應的if語句的基本標記：

以下操作實現的是一個“當訪客執行特定操作時才會展示的公告欄”。如果你希望你的公告欄僅在網站主頁出現，那么你還可以添加一個復選框，因為客戶可能并不希望此消息出現在商店的每個頁面上。在你已經添加HTML的下方，添加以下模式標記和JSON：

如圖所示，JSON數組中的ID

在這種情況下，主題編輯器上將出現一個復選框，如果選中該復選框，將顯示公告內的元素和消息。此外，還將出現第二個復選框，使你可以在非主頁頁面上隱藏公告欄。

公告欄內容的調整

如果你希望在公告欄中出現文本和超鏈接，你可以添加支持訪問文本字段和URL值的對象。同樣，如果你不需要它們，你可以使用if語句來隱藏這些內容：

一旦你在schema標簽中創建了相應的值，這兩個新的section.settings對象將使你能夠創建用于添加文本和URL的選項。兩者都有特定的輸入類型，分別是text和url，它們將在主題編輯器中生成對應選項：

你在本會話中要添加的最后一項是為公告欄添加用于選擇背景和文本顏色的選項。而且，你可以根據架構標記中的值來調整主題的CSS。例如，你可以創建“color（顏色）”設置，該設置會將選定的顏色值發送到CSS屬性。

以本文為例，將出現如下所示的會話設置：

你可以將公告欄選定默認的黑色，當你在主題編輯器上查看時，你將看到一個顏色選擇器工具。announcement_bar_color ID將被會話中的

現在，由主題編輯器上的顏色選擇器選擇的十六進制代碼是通過section.settings.announcement_bar_color屬性值表示的，因此你能夠輕松調整顏色。設置公告欄文本的顏色也可以采用相同的方法。

然后，你還可以在你的

上雨果網搜索“跨境資料庫”,領取歐美/東南亞各國市場商機、各大平臺熱銷品報告、跨境電商營銷白皮書！