小编abb*_*zoo的帖子

我目前正在使用Owl Carousel在桌面/笔记本电脑大小的设备上展示一个画廊.但是在较小的设备上,我想禁用该插件并将每个图像堆叠在一起.

这可能吗？我知道你可以调整猫头鹰旋转木马在某些断点处在屏幕上显示一定数量的图像.但我希望能够完全关闭它,删除所有的div等.

这是我目前正在使用的笔:http://codepen.io/abbasinho/pen/razXdN

HTML:

<div id="carousel">
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);">
  </div>
</div>

CSS:

#carousel {
  width: 100%;
  height: 500px;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

jQuery的:

$("#carousel").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true
});

感谢任何帮助!

我有一个:nth-child很难解决的问题.我的目标是在形成列表的4个项目的组合中定位每个第3和第4项.

例如:

<div class="normal">Item 1</div>
<div class="normal">Item 2</div>
<div class="different">Item 3</div>
<div class="different">Item 4</div>
<div class="normal">Item 5</div>
<div class="normal">Item 6</div>
<div class="different">Item 7</div>
<div class="different">Item 8</div>

在这个例子中,我想定位所有实例<div class="different">- 我已经使用了很多nth-child生成器来提出答案,但没有任何东西能让我得到我需要的东西.

任何帮助将非常感激!

我已经注意到在比较它们在Chrome和Firefox中的呈现方式时使用rems的一个小问题.

使用以下CSS:

html {
  font-size: 62.5%;
}

.rem-test {
  width: 50%;
  height: 20rem;
  background: red;
}

呈现时结果略有不同,Firefox显示的框比Chrome中的框短:

有什么办法可以阻止这种情况发生吗？

这是一支笔:http://codepen.io/abbasinho/pen/WbJWNq

我想知道您是否可以使用 SASS 变量来生成内联 CSS。

我知道您可以执行以下操作：

$my-class: yellow;
$yellow: #ffff00;

.#{$my-class} {
    color: $yellow;
}

然后使用输出的 Grunt 任务内联 CSS：

<div class="yellow" style="color: #ffff000;">Hello world</div> 

但是是否可以使用变量：

$font-family: Arial, sans-serif;

以这样的方式：

<div style="font-family: $font-family;">Hello world</div>

这将输出：

<div class="font-family: Arial, sans-serif;">Hello world</div>

我很确定您不能使用基本的 SASS，但很高兴听到一些关于它的想法。

我有一个容器,我想扩展,以显示容器完全展开后绝对位于右下角的内容.

使用CSS扩展容器非常简单.

@keyframes test-grow {
  100% {
    width: 100%;
    height: 30rem;
  }  
}

.test {
  width: 2rem;
  height: 2rem;
  animation: test-grow 5s forwards;
}

棘手的部分是揭示其中的内容.使用简单的绝对定位不起作用,因为内容固定到容器的右下角,无论其大小如何,因此随着容器的增长,它随着容器的角移动.

这是我想要实现的一个快速GIF示例:http://imgur.com/pRneSJr但我的展示将从一个角落到另一个角落.

我在这里有一支笔:http://codepen.io/abbasinho/pen/QyrZOm？edit = 1100,它显示了容器动画.但是你会看到我的内容问题.

我们将非常感激地提供任何帮助.

我想在页面上的文本列表中添加一个连续循环滚动。因此，当用户到达列表的最后一项时，第一项会在您滚动时直接显示在下方，依此类推。上下滚动会很棒。滚动将在页面上，而不是在列表的父容器上。

我知道面向 jQuery 的解决方案，例如：Continuous Looping Page (Not Infinite Scroll)，但希望使用 vanilla JS 解决方案来避免性能开销。

这是示例 HTML：

<div class="wrapper">
  <ul class="loop">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <!-- THERE COULD BE LOTS OF LIST ITEMS -->
  </ul>
</div>

这支笔似乎有了答案。但是，当我开始剥离样式并用自己的样式替换时，滚动停止工作。如果可能的话，我希望这个卷轴不要依赖任何装饰元素。

我在这里设置了一支笔：https : //codepen.io/abbasarezoo/pen/pavxVd

在此先感谢您的帮助！

我正在使用 Jekyll 构建一个简单的博客。我正在循环浏览我所有的帖子，这很有效。但是，我想为每个帖子添加一个数字标记。例如，第一篇文章将标记为 1，第二篇文章将标记为 2...，依此类推。

我当前的循环是这样的：

<ol class="post-list">
  {% for post in site.posts %}
    <li class="post-item">
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
        <div class="post-info">
          <p>Post #1</p>
          <h2>{{ post.title }}</h2>
        </div>
      </a>
    </li>
  {% endfor %}
</ol>

我知道我需要向该循环添加计数，但我不确定如何添加。

将以下内容添加到我的循环中似乎很有意义：

{% for num in (1...n) %}

但我不确定如何将其与我现有的循环一起使用。

任何帮助将不胜感激。

我目前正在构建一个拖放模板构建器,允许用户选择预先填充的内容并在浏览器窗口内对其进行排序.然后我希望用户能够将新填充的单独HTML/Zip文件.

它类似于MailChimp模板构建器中使用的功能.

但是,我正在推动我的技能组合的界限,我正在寻求帮助,以便用户可以下载新填充的内容.我在这里学习所以任何建议都不仅仅是值得赞赏的.

有人有什么想法吗？

谢谢!

我的电子表格中有一组数据需要使用特定参数进行过滤。我需要返回与 6 个字符的字符串的最后 3 个字符匹配的数据。

例如，如果我有以下数据：

| Col 1 |
---------
| AA-XYZ |
| AA-ABC |
| BB-XYZ |
| BB-DEF |
| CC-XYZ |
| CC-GHI |

我的过滤器将返回：

| Col 1 |
---------
| AA-XYZ |
| BB-XYZ |
| CC-XYZ |

这可以通过标准搜索/过滤功能实现吗？还是需要正则表达式？