不理解为什么这段代码在Google Sites HTML Box小工具中无法运行

Question

不理解为什么这段代码在Google Sites HTML Box小工具中无法运行

4

我正在尝试使用Google网站，并尝试使一些HTML代码实际工作，但遇到了困难。基本上，我想能够输入HTML代码以及CSS样式而不必使用内联样式，因此我做了一些研究，发现确实可以做到。据说只需要添加一个HTML小工具并输入相关代码，然后单击保存即可！它应该起作用。问题是当我这样做时，它根本不起作用。

我已查看以下链接以获得一些指导，并且似乎我正在正确地执行所有步骤：

另一个奇怪的地方是，当我使用第二个链接的示例时，它可以正常工作，但是当我删除示例的脚本部分时，它无法像我的代码一样产生样式化的结果。这里有一个非常简单的示例。

全局版本

<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>

我只得到了没有格式的句子，如果我改为使用内联样式，它就可以正常工作，但这真的违背了HTML框的初衷。你有什么建议吗？编辑：这里是一个JSFiddle，其中包含上面的测试代码和预期效果。JSFiddle 此外，我应该明确说明。我提供的代码完全正常，没有错误。我要解决的问题是让第一个版本（非内联版本）在Google Sites的HTML框中正常工作。

- MrJman006

你能创建一个 JSFiddle 吗？ - Raptor

http://jsfiddle.net/ELFHL/ - mitchimus

我不确定JSFiddle是什么，但从我所看到的来看，它似乎是一个中间工具，可以呈现我的html/css/javascript，并提供我可以用来显示结果的链接。就像发布一张图片一样。如果我错了，请纠正我，但如果是这种情况，那么不，我不会/不能使用JSFiddle。 - MrJman006

你的示例运行得非常好在这里检查。 - voddy

我知道这个示例可以工作。但是我需要它在Google网站的Html框中工作，除非我使用内联版本，否则它无法工作。 - MrJman006

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mitchimus · Accepted Answer

在“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样式。如果您转到页面右上角，单击 MORE > Preview Page as Viewer，则可以正确显示。 HTML BOX View Preview as Viewer