页切图过程中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属性值表示的，因此你能够轻松调整颜色。设置公告栏文本的颜色也可以采用相同的方法。

然后，你还可以在你的

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！