自定义 HTML 正文的大小
Customizing the size of a HTML body
我想自定义 Wordpress 主题的主体 "attitude",以消除页眉(白色 space)和页面顶部之间的灰色间隙。换句话说,我想完全删除这个灰色间隙,以及靠近页脚的正文末端和站点末端之间的灰色间隙。
这是态度的现场演示:http://themehorse.com/preview/attitude/
非常感谢您,如果有任何问题,请随时与我联系。
此致
header 与顶部间隔一点的原因是因为 ID 为 'branding' 的 header 标签具有 CSS 属性 margin-top 值为 30px。这会导致 header 标签被设置为距屏幕顶部 30 像素。只需删除那行 CSS 代码即可将 body 移动到页面顶部。
使用 chrome 开发工具快速查看,header 元素似乎是罪魁祸首。看来他们正在使用 branding
id 选择器对其应用 30px
上边距。
#branding {
margin-top: 30px;
}
您可以在 style.css 的第 549 行更改此设置。
现在开始讲课...
不是真的,但我想向您展示一些东西,以帮助您在未来解决这些类型的问题 - 了解更多有关您可用的工具的信息永远不会缺席。
- 您可以通过右键单击页面上的任意位置并选择检查元素来打开 chrome 开发工具,或者使用 OS
的键盘快捷键
- 在弹出的 chrome 开发工具面板的左上角,鼠标指针位于一个方框符号中。如果您单击它以启用它,然后在页面上移动鼠标,您将看到以各种颜色突出显示的元素。
这里我们可以看到顶部的灰色条已经用橙色高亮显示,下面的一大段用蓝色高亮显示。
当元素如上突出显示时单击鼠标左键将跳转到检查工具的元素选项卡中的元素。我们可以看到我们选择的元素是一个header,ID为branding
快速滚动右侧的样式检查器会显示用于品牌的 id 选择器和将上边距设置为 30px 的声明。检查员也很友好地告诉我们规则来自源代码中的哪个位置; style.css, line:549
.
如果我们切换到“源”选项卡并在检查器中打开 style.css(或在文本编辑器中打开源代码),那么我们会在第 549 行找到承诺的品牌 ID 选择器。
有关如何浏览网页的更多信息,我建议您阅读 google chrome 或 mozilla(您最喜欢使用的浏览器)
的开发工具指南
火狐:https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools
我想自定义 Wordpress 主题的主体 "attitude",以消除页眉(白色 space)和页面顶部之间的灰色间隙。换句话说,我想完全删除这个灰色间隙,以及靠近页脚的正文末端和站点末端之间的灰色间隙。
这是态度的现场演示:http://themehorse.com/preview/attitude/
非常感谢您,如果有任何问题,请随时与我联系。
此致
header 与顶部间隔一点的原因是因为 ID 为 'branding' 的 header 标签具有 CSS 属性 margin-top 值为 30px。这会导致 header 标签被设置为距屏幕顶部 30 像素。只需删除那行 CSS 代码即可将 body 移动到页面顶部。
使用 chrome 开发工具快速查看,header 元素似乎是罪魁祸首。看来他们正在使用 branding
id 选择器对其应用 30px
上边距。
#branding {
margin-top: 30px;
}
您可以在 style.css 的第 549 行更改此设置。
现在开始讲课...
不是真的,但我想向您展示一些东西,以帮助您在未来解决这些类型的问题 - 了解更多有关您可用的工具的信息永远不会缺席。
- 您可以通过右键单击页面上的任意位置并选择检查元素来打开 chrome 开发工具,或者使用 OS 的键盘快捷键
- 在弹出的 chrome 开发工具面板的左上角,鼠标指针位于一个方框符号中。如果您单击它以启用它,然后在页面上移动鼠标,您将看到以各种颜色突出显示的元素。
这里我们可以看到顶部的灰色条已经用橙色高亮显示,下面的一大段用蓝色高亮显示。
当元素如上突出显示时单击鼠标左键将跳转到检查工具的元素选项卡中的元素。我们可以看到我们选择的元素是一个header,ID为branding
快速滚动右侧的样式检查器会显示用于品牌的 id 选择器和将上边距设置为 30px 的声明。检查员也很友好地告诉我们规则来自源代码中的哪个位置; style.css, line:549
.
如果我们切换到“源”选项卡并在检查器中打开 style.css(或在文本编辑器中打开源代码),那么我们会在第 549 行找到承诺的品牌 ID 选择器。
有关如何浏览网页的更多信息,我建议您阅读 google chrome 或 mozilla(您最喜欢使用的浏览器)
的开发工具指南火狐:https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools