我如何从Codepen导出并显示时间表

问题描述 投票:0回答:1

好,首先,我在Codepen上设定了时间表。这是工作链接:https://codepen.io/morganjaggers/pen/VwYmKra

请查看上面的链接以获取完整代码

html:

<section class="timeline">
<ul>
<li>
<div>
<time>1989</time> We began our family run business creating small travel packages for 
independent travellers to visit areas within the UK.
</div>
</li>
<li>
<div>
<time>1997</time> We expanded out, connecting to other supliers to created packages outside 
of Europe.
</div>
</li>
<li>
<div>
<time>2003</time>We won awards and became more established as a company.
</div>
</li>
<li>
<div>
<time>2010</time>We started searching for cheaper deals, focusing on those looking for a 
budget holiday.
</div>
</li>
<li>
<div>
<time>2017</time>We become what we are now known today as TravelTipsForLess.
</div>
</li>
</ul>
</section>

但是,当我将每个文件精确地编码并粘贴到我的ATOM文档中时,它不起作用。它显示了时间轴和点,但是JS无法正常工作,HTML书写没有出现吗?

任何人都知道为什么它可以在Codepen中工作,但导出时却不能吗?

javascript html css timeline codepen
1个回答
0
投票

Codepen不需要您在其沙箱环境中使用<script><style>标签。

您需要在下面的这种格式下将javascript放在<script></script>内,并将CSS放在<style></style>内。

将文件另存为HTML文档,然后可以在浏览器中查看。

<!DOCTYPE html>

<head>
    <title>Example</title>
    <style>
        // CSS HERE
    </style>
</head>

<body>

    // HTML HERE

    <script>
        // JAVASCRIPT HERE
    </script>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.