码农教程 - 一技在手,衣食无忧! tools

目录

如何操作 - 水平滚动图片库

❮ 上一节 下一节 ❯

了解如何使用 CSS 创建带有水平滚动条的图片库。

水平滚动图片库

使用水平滚动条查看其他图片：

Cinque Terre Forest Northern Lights Mountains Cinque Terre
亲自试一试 »

创建具有水平滚动的图片库

步骤1）添加HTML：

示例

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>
步骤2）添加CSS：

示例

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}
亲自试一试 »

提示：去我们的HTML 图片教程了解有关图片的更多信息。

提示：去我们的CSS 样式图片教程了解有关如何设置图片样式的更多信息。


❮ 上一节 下一节 ❯