如何导出Codepen以在网站的HTML中使用

Question

这是我的代码笔：

http://codepen.io/hollowgast/pen/XpYEvb XpYEvb

我试图弄清楚如何使CSS在HTML中工作。 但是，无论我如何尝试，这似乎都是空白。 当我导出文件时，HTML会显示，但是带有背景颜色等的CSS部分不会显示在导出的ZIP文件中。

我是Codepen的新手，正在尝试将CS​​S添加到我的HTML文件中。 任何帮助将不胜感激！

Answer 1

如果转到“ 更改视图”菜单，则其中有用于直接代码链接到.html ， .css ， .less和.js文件的选项。

这是您的CSS：

.tcb-quote-carousel {
  background: #17171c;
  padding-top: 30px;
  margin-top: 40px;
}
.tcb-quote-carousel .quote {
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 30px;
}
.tcb-quote-carousel .carousel {
  padding-bottom: 30px;
}
.tcb-quote-carousel .carousel .carousel-indicators > li {
  background-color: #141e2e;
  border: none;
}
.tcb-quote-carousel blockquote {
  margin-top: 5px;
  text-align: center;
  border: none;
  color: grey;
  font-size: 10px;
}
.tcb-quote-carousel .profile-circle {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 100px;
}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

Answer 2

如果没有LESS处理器，则可以在codepen端编译代码：

Answer 3

首先制作标签样式，然后像这样放置CSS代码

<style>input code here</style

dar之后复制html代码并保存文档