-1

以下代码已添加到我的网页中，应该呈现实时 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 没有完全呈现的任何想法？谢谢！

4

2 回答 2

1

您还需要转换的 CSS。它在 SCSS 中，而不是纯 CSS 中。幸运的是，Codepen 可以在小箭头下拉列表中查看已编译的 HTML 和 CSS，以便提供帮助。缺少的另一点是，您将不得不将它与一些实际的编程逻辑挂钩，以使动画随着步骤前进。

于 2020-09-18T09:54:45.030 回答
0

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

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

<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 的博客上阅读有关嵌入笔的更多信息。

于 2017-06-22T14:28:44.230 回答