4

我在搞乱谷歌网站，试图让一些 html 代码真正起作用，但我却碰壁了。基本上我希望能够输入 html 代码以及 css 样式而不必使用内联样式，所以我做了一些研究，果然可以做到。据说只需要添加一个HTML小工具并输入相关代码，点击保存和shezam！它应该工作。问题是当我这样做时，它根本不起作用。

我查看了以下链接以获得一些指导，似乎我做的一切都正确：

  1. https://productforums.google.com/forum/#!topic/sites/rk6RRHNefso
  2. https://support.google.com/sites/answer/2500646?hl=en

另一个奇怪的部分是，当我使用第二个链接示例时，它工作得很好，但是当我删除示例的脚本部分时，它无法像我的代码一样产生样式化的结果。这是我尝试过的一个非常简单的示例。

全球版

<style>

#tester {
 padding: 100px;
 height: 500px;
 width: 500px;
 border: 1px solid #0F0;
 background-color: #ff0000;
}

</style>


<div id="tester">please work 0_0</div>

内联版本

<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>

我得到的只是 div 本身没有格式的句子。如果我将其更改为使用内联样式，它就可以正常工作，但这确实首先破坏了 HTML 框的用途。

关于我做错了什么的任何建议？

编辑：这是一个 JSFiddle 上面的测试代码和它应该是什么样子

JSFiddle

另外，我可能应该指定。我提供的代码工作得很好，没有错误。我要解决的问题是让第一个版本（非内联版本）在 Google Sites 的 Html 框中工作。

4

1 回答 1

9

您在“HTML Box”中包含的 HTML 和 CSS 将被沙盒化，因此很遗憾，您不能使用它来将样式应用于页面其余部分的元素。

我用下面的代码让它在我的网站上工作

<style type="text/css">
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>

<div id="tester">please work 0_0</div>

默认情况下，当您处于编辑器模式时，似乎不会应用 HTML 框中的任何自定义 CSS。如果您转到页面的右上角，单击更多>预览页面作为查看器它将正确显示。

HTML 框视图

作为查看器预览

于 2014-03-12T07:00:57.570 回答