我们承诺每页不会显示超过一个小型广告。别担心,隐藏此消息将确保你不会再收到烦人的提醒。
介绍
何时使用
轨道在网站主视窗之外显示可选的伴随内容。网站经常将轨道与 粘性 内容一起使用,以便在滚动页面时将额外的(通常是可选的)内容固定到你的视窗。
语义的默认轨道宽度为 300px
,刚好足以容纳许多 常见的广告单元尺寸,也刚好足以容纳子导航菜单或突出的号召性用语。
调整尺寸
轨道内容很可能需要特定于你的站点内容的任意断点,以确保它们不会超过用户浏览器水平宽度。
轨道通常用在带有长篇内容(如博客文章、文章或用户资料)的长单列容器旁边。通常,你的主要文本容器宽度应设置为 600-800px
左右(具体取决于你的字体大小),以便 优化行长以提高可读性。
这种设置意味着大多数平板浏览器只能容纳一个轨道。超极本和较低分辨率的电脑可以容纳两个小型轨道,而更大的显示器通常可以容纳两个全尺寸轨道。此实现的具体细节由你在项目中决定。
类型
轨道
轨道可以显示在容器的左侧或右侧。
左侧轨道内容
右侧轨道内容


内部
轨道可以附加到容器的内部。
左侧轨道内容
右侧轨道内容
分割
轨道可以在自身和容器之间创建一个分隔线。
左侧轨道内容
右侧轨道内容


变体
附加
轨道可以显示为附加到主视窗。
左侧轨道内容
右侧轨道内容


左侧轨道内容
右侧轨道内容
靠近
轨道可以显示为更靠近主视窗。
左侧轨道内容
右侧轨道内容


左侧轨道内容
右侧轨道内容


尺寸
轨道可以具有不同的尺寸。
迷你
微型


小型
大型


巨大
超大


庞大

