Question

以下代码已添加到我的网页中，应该呈现实时CodePen图像，但它会显示一个链接：

<p>Fitness app</p>
<div class="w3-half w3-grayscale-max">
  <p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>

有关为什么CodePen没有完全呈现的任何想法？谢谢！

Answer 1

您还需要转换的CSS。它在SCSS中，而不是纯CSS中。幸运的是，Codepen在小箭头下拉菜单中提供了查看已编译的HTML和CSS的选项，因此很有帮助。缺少的另一点是，您将不得不将其与一些实际的编程逻辑联系起来，以使动画按照步骤进行。

Answer 2

在CodePen页面上，点击右下角的嵌入按钮。从那里，您可以选择希望笔在网页上嵌入时的显示方式。然后选择复制＆amp;粘贴代码。

您的问题中的代码段看起来没有必要的数据属性：

<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p>

您可以在CodePen的博客上阅读有关embedding pens的更多信息。

嵌入CodePen不在网站上呈现

2 个答案: