嵌入 Canva 简报
Canva 简报 ( Canva presentation ) 是一个非常好用的线上简报应用程序，除了可以运用 Canva 里提供的各种样板，更可以分享到各个平台进行观看，这篇教学会介绍如何透过 HTML 的实作，将 Canva 简报加到网页中。
将 Canva 简报发布到网络
登录 Canva 之后后前往自己的专案，打开要分享的 Canva 简报，点击右上角的“分享”。
点击后打开分享选单后，点击“显示更多”。
展开更多选单后，点击“嵌入”。
嵌入的功能会将 Canva 简报设为“公开检视”，确认后点击“嵌入”
完成后会出现嵌入的 HTML 程序码和网址，点击复制 HTML 程序码。
嵌入 Canva 简报
复制 HTML 程序码之后，贴到网页中的 <body> 里，执行后就会看见 Canva 简报出现在网页中。
<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
<iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https://www.canva.com/design/DAFw6l_Byv4/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
oxxo 設計的 <a href="https://www.canva.com/design/DAFw6l_Byv4/view?utm_content=DAFw6l_Byv4&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Page 1</a>
修改嵌入的 Canva 简报 HTML
观察嵌入的 Canva 简报 HTML，可以发现主要的 <iframe> 放在 <div> 里，因此如果不想要使用 Canva 默认的样式，可以单纯取出 <iframe>，并修改 style，就能增加嵌入 Canva 简报的弹性，此外，如果不需要链接信息，只要移除 <div> 的下方额外的链接信息即可，下方的范例会使用注解的方法，隐藏将不需要的部分，并移除 <iframe> 原本的样式，使用其他样式取代。
<style>
iframe{
width:300px;
height:200px;
border:1px solid #000;
}
</style>
<!-- <div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;"> -->
<iframe loading="lazy" src="https://www.canva.com/design/DAFw6l_Byv4/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
<!-- </div>
oxxo 設計的 <a href="https://www.canva.com/design/DAFw6l_Byv4/view?utm_content=DAFw6l_Byv4&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Page 1</a> -->
微信扫码关注
抖音扫码关注