程序员经验分享-hwhale

无限滚动轮播（仅限 CSS）

2024-01-07

我正在尝试创建一个自动循环播放的轮播。最初我正在实施slick slider，但后来我发现了这种仅 CSS 的方法：

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.slider .slide {
  height: 100px;
  width: 250px;
}
<div class="slider">
  <div class="slide-track">
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
  </div>
</div>

现在，我正在尝试逆向工程并为我的轮播实现类似的东西：

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.carousel {
  padding: 100px 0;
  background: lightblue;
  overflow: hidden;
  position: relative;
}

.carousel__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel__slide {
  animation: scroll 10s linear infinite;
  display: flex;
  flex-direction: column;
  width: 33%;
}

.carousel__image {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  margin: 15px 20px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="carousel">

  <div class="container-fluid px-0">
    <div class="row">
      <div class="col-12">
        <div class="carousel__wrapper">

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/200');"></div>
          </div>

        </div>
      </div>
    </div>
  </div>

</section>

在我的演示中，在最后carousel有空格。而在上面的工作演示中，徽标平滑循环（从头开始，没有空格）。

现在，在上面的工作演示中，我将所有 CSS 剥离为仅此：

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slide-track {
  animation: scroll 10s linear infinite;
  display: flex;
}
<div class="slider">
  <div class="slide-track">
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
  </div>
</div>

上面的代码可以工作，并且上面的 css 存在于我的演示中，但它工作得不太顺利？显示最后一张幻灯片后如何进行过渡（使其从头开始）？


轮播基于固定宽度工作。如果有 7 张幻灯片：

  1. 他们在 html 中复制了一次幻灯片。确保重复幻灯片。
  2. The carousel__wrapper已经给width: calc(250px * 14);。要显示的幻灯片数量的两倍。请注意，包装器取决于幻灯片宽度，而幻灯片不依赖于包装器。
  3. The carousel宽度小于包装纸的宽度250px * 4并且溢出是隐藏的，因此我们只能看到窗口而不是整个 carousel__wrapper。
  4. 动画将幻灯片移动calc(-250px * 7)向左。这里，250px 是幻灯片宽度。请注意，它们仅移动了 7 张幻灯片，而不是整个 14 张。

如果不使用 javascript，则无法使用相对尺寸。为了仅保留 CSS，您需要绝对宽度。
如果您使用变量，那么事情将很容易维护和理解：

:root {
  --no-of-slides: 6;
  --slides-in-view: 4;
  --slide-width: 200px;
  --slide-height: 300px;
  --iteration-time: 10s;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
  }
}

.carousel__wrapper {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  
  width: calc(var(--slides-in-view) * var(--slide-width));
  overflow: hidden;
  border: 1px dashed gray;
  margin: 0 auto;
}

.carousel {
  padding: 100px 0;
  background: lightblue;
  
  overflow: hidden;
  width: calc(2 * var(--no-of-slides));
}

.carousel__slide {
  animation: scroll var(--iteration-time) linear infinite;
  display: flex;
  flex-direction: column;
  
  flex: 0 0 auto;
  width: var(--slide-width);
  height: var(--slide-height);
  box-sizing: border-box;
  /*border: 1px dotted darkblue;*/
}

.carousel__image {
  background-size: cover;
  background-repeat: no-repeat;
  
  height: 50%;
  /*width: 100px;*/
  margin: 15px 20px;
}


/* just for analysis remove this 3 rules later*/
    .carousel__slide {
      position: relative;
    }

    .carousel {
      counter-reset: slideNo;
    }

    .carousel__slide::before {
      counter-increment: slideNo;
      content: counter(slideNo);
      position: absolute;
      top: 0%;
      left: 50%;
      font-size: 2rem;
      color: lime;
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="carousel">

  <div class="container-fluid px-0">
    <div class="row">
      <div class="col-12">
        <div class="carousel__wrapper">

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>

          <!--#### repeat ####-->
          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

In above CSS rules my changes are after blank lines. See the comments in the code.

如果您想要基于视口的尺寸，那么您可以使用vw and vh units:

:root {
  --no-of-slides: 6;
  --slides-in-view: 4;
  --slide-width: 33vw;
  --slide-height: 50vh;
  --iteration-time: 10s;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
  }
}

.carousel__wrapper {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  
  width: calc(var(--slides-in-view) * var(--slide-width));
  overflow: hidden;
  border: 1px dashed gray;
  margin: 0 auto;
}

.carousel {
  padding: 10px 0;
  background: lightblue;
  
  overflow: hidden;
  width: calc(2 * var(--no-of-slides));
}

.carousel__slide {
  animation: scroll var(--iteration-time) linear infinite;
  display: flex;
  flex-direction: column;
  
  flex: 0 0 auto;
  width: var(--slide-width);
  height: var(--slide-height);
  box-sizing: border-box;
  /*border: 1px dotted darkblue;*/
}

.carousel__image {
  background-size: cover;
  background-repeat: no-repeat;
  
  height: 50%;
  /*width: 100px;*/
  margin: 15px 20px;
}


/* just for analysis remove this 3 rules later*/
    .carousel__slide {
      position: relative;
    }

    .carousel {
      counter-reset: slideNo;
    }

    .carousel__slide::before {
      counter-increment: slideNo;
      content: counter(slideNo);
      position: absolute;
      top: 0%;
      left: 50%;
      font-size: 2rem;
      color: lime;
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="carousel">

  <div class="container-fluid px-0">
    <div class="row">
      <div class="col-12">
        <div class="carousel__wrapper">

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>

          <!--#### repeat ####-->
          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
          </div>

          <div class="carousel__slide">
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
            <div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

sass

无限滚动轮播（仅限 CSS） 的相关文章

随机推荐

  • Wordpress Mobile - 更改部分 URL 而不是重定向到首页？

    我被要求在一个客户网站上做一些维护工作 但我并没有参与构建 该网站是使用 Wordpress 构建的 移动设备上的任何用户都将被重定向到该网站的更适合移动设备的版本 问题是 如果移动用户单击原始网站 主页 内页等 的任何链接 无论是什么链接

  • “注册 COM 互操作”与“使程序集 COM 可见”

    这两个选项之间的真正区别是什么 我所知道的是 注册 COM 互操作此选项在程序集上执行 regasm 并将程序集注册为注册表中的 COM 组件 也可能不是 以及所有类似 COM 的注册表项 这一步会生成TLB文件吗 还做了什么 有时我看到编

  • 病态的正则表达式会爆炸（时间和内存）？

    什么是病态的正则表达式会破坏许多解析器 在时间和内存上 以及哪些解析器 正则表达式越基本 越标准 非恶意用户无意中想出它的可能性就越大 请随意发布实际时间和内存数据以及解析器版本 我似乎记得 PERL 中过多的后向断言或 编辑 回溯据说可以

  • OpenCV VideoWriter 大小问题

    我正在尝试读取视频文件 处理它 并将处理后的帧写入作为输出视频文件 但是 我收到以下错误 OpenCV Error Assertion failed img cols width img rows height channels 3 in

  • 访问 NSNotification 中传递的对象？

    我有一个正在发布 NSDictionary 的 NSNotification NSDictionary dict NSDictionary dictionaryWithObjectsAndKeys anItemID ItemID NSStr

  • 使用 ASM 重写 Java 本机方法

    我试图通过使用重写类的字节码来做到这一点ASM 4 0 http download forge objectweb org asm asm4 guide pdf来替换所有的native方法与非native stubs 到目前为止我有这个 c

  • 将共享库与 .NET Core 结合使用

    我写了我的开源库 LINQ 到 Twitter https github com JoeMayo LinqToTwitter 使用共享库来最大限度地减少部署工件并处理特定于平台的功能 我想支持 NET Core 并且认为最快的方法是引用共享

  • 什么工具可以将DLL反编译成C++源代码？ [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个停止工作的旧 DLL log2vis dll 我想查看它的内部 看看它使用了哪些对象 该 DLL

  • 如何可视化 TensorFlow Estimator 权重？

    如何从图层中选择一个图层tf estimator Estimator并访问该层中每个单元的权重向量 具体来说 我正在尝试可视化密集层的权重 看着https github com tensorflow tensorflow blob r1 3

  • 是否可以使用 Twilio API 更改消息传递 URL 回调？

    您好 感谢您的阅读 是否可以使用 Twilio API 更改消息传递 URL 回调 你需要POST to an IncomingPhoneNumber实例资源 你可以这样做curl 或者如果您使用其他语言 请阅读这些文档 并为示例代码选择另

  • 基于sysdate触发

    我有一张桌子 表架构 CREATE TABLE CHARGES total NUMBER 30 admitdate TIMESTAMP 6 dischargedate TIMESTAMP 30 触发算法 if dischargedate n

  • 为什么分号会改变 Chrome 控制台中的 JavaScript 行为 [重复]

    这个问题在这里已经有答案了 这段代码完美地执行在谷歌浏览器控制台 a b a 10 b 20 a 10 b 20 但是当我在末尾添加分号时 出现语法错误 a b a 10 b 20 VM115 1 未捕获的语法错误 意外的标记 有人能告诉我

  • 在Python中查找数字的倍数

    我正在尝试编写一个代码 让我找到一个数字的前几个倍数 这是我的尝试之一 def printMultiples n m for m in n m print n end 我发现 通过把for m in n m 无论数字是什么 它都会遍历循环m

  • Pandas，如何计算过去n年每个月的平均值

    我有一个包含 20 年数据的数据框 其中时间作为日期时间索引 EDIT Time value 1999 01 01 00 00 00 7 1999 01 01 01 00 00 4 1999 01 01 02 00 00 9 1999 01

  • 如何使用 Jest 获取快照中的 CSS 样式

    我有以下问题 我不知道是否可以使用 Jest 快照功能获得结果 我有一个 React 组件 我正在使用 Jest 来测试它 我希望快照包含css风格不班级名称 目前我的快照是这样的 div div 我想要这样 div div 我的应用程序正

  • Python Poetry 已安装，但“诗歌：无法识别术语‘诗歌’”Windows Powershell [重复]

    这个问题在这里已经有答案了 我已经安装了诗歌版本1 4 2 当我跑步时 Invoke WebRequest Uri https install python poetry org UseBasicParsing Content python

  • docx 文件无法在 IE 8 中内联内容配置的浏览器中打开

    我想从 asp net 在 IE 中打开 docx 文件 IIS 已正确映射 mime 类型 我可以很好地打开 pdf 但 docx 总是会提示我下载 例如 content disposition attachment 有什么需要做的设置吗

  • Django 统计字段中的项目数

    模型 py class Event models Model name models CharField max length 20 unique True distance models IntegerField date models

  • 是否仍推荐使用旧版 Criteria API？

    我的团队在 Hibernate 3 x 下长期使用 hibernate Criteria API 最近 我们想将Hibernate版本升级到5 但是Criteria API似乎不再推荐了 但 JPA 看起来像是一个完全不同的 API 我们不

  • 无限滚动轮播（仅限 CSS）

    我正在尝试创建一个自动循环播放的轮播 最初我正在实施slick slider 但后来我发现了这种仅 CSS 的方法 body align items center background E3E3E3 display flex height

热门标签