如何在不使用 JavaScript 的情况下创建 CSS 画廊-之路教程

创建 HTML

众所周知，一个画廊由 2 个图片块组成。
第一个包含小图像（缩略图），另一个包含大图片。
如果你想创建一个简单的画廊，你必须定义唯一的锚点（图片1、图片2、图片3、图片4、图片5）。

代码必须如下所示：

<div id="gallery">
  <ul id="navigation">
    <li>
      <a href="#picture1">
        <img alt="small house 1" src="/house-thumbnail1.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture2">
        <img alt="small house 2" src="/house-thumbnail2.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture3">
        <img alt="small house 3" src="/house-thumbnail3.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture4">
        <img alt="small house 4" src="/house-thumbnail4.jpeg" />
      </a>
    </li>
  </ul>
  <div id="full-picture">
    <div>
      <a name="picture1"></a>
      <img alt="Large house 1" src="/house1.jpeg" />
    </div>
    <div>
      <a name="picture2"></a>
      <img alt="Large house 2" src="/house2.jpeg" />
    </div>
    <div>
      <a name="picture3"></a>
      <img alt="Large house 3" src="/house3.jpeg" />
    </div>
    <div>
      <a name="picture4"></a>
      <img alt="Large house 4" src="/house4.jpeg" />
    </div>
  </div>
</div>

如何在不使用 JavaScript 的情况下创建 CSS 画廊

事实证明，可以在不使用 Javascript 的情况下创建纯 CSS 画廊。

在本文中，我们将展示如何仅使用 HTML 和 CSS 来做到这一点。

添加 CSS

设置大图像块的宽度等于其中一个大图像的宽度。
将溢出属性定义为其大图像块的“隐藏”值。
将带有锚链接（<a> 元素）的图片放置在此块内。
给出小图片的链接，并带有相应的锚点，将它们与大图片相关联。到这最后一步，当点击小图时，会滚动到大图块中对应的大图。

#gallery {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;
}
#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
#navigation li {
  padding: 0;
  margin: 0;
  margin: 5px 0 20px;
}
#navigation li a img {
  display: block;
  border: none;
}
#navigation li a {
  display: block;
}
#full-picture {
  width: 600px;
  height: 375px;
  overflow: hidden;
  float: left;
}
#full-picture img {
  width: 100%;
}

现在我们的画廊创建了！让我们看看完整的代码。

使用 HTML 和 CSS 创建画廊的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #gallery {
        width: 600px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        margin: 100px auto;
        border: 2px solid #003C72;
      }
      #navigation {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
      }
      #navigation li {
        padding: 0;
        margin: 0;
        margin: 5px 0 20px;
      }
      #navigation li a img {
        display: block;
        border: none;
      }
      #navigation li a {
        display: block;
      }
      #full-picture {
        width: 600px;
        height: 375px;
        overflow: hidden;
        float: left;
      }
      #full-picture img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="gallery">
      <ul id="navigation">
        <li>
          <a href="#picture1">
            <img alt="small house 1" 
                 src="/house-thumbnail1.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
            <img alt="small house 2" 
                 src="/house-thumbnail2.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
            <img alt="small house 3" 
                 src="/house-thumbnail3.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
            <img alt="small house 4" 
                 src="/house-thumbnail4.jpeg" />
          </a>
        </li>
      </ul>
      <div id="full-picture">
        <div>
          <a name="picture1"></a>
          <img alt="Large house 1" 
               src="/house1.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" 
               src="/house2.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" 
               src="/house3.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="Large house 4" 
               src="/house4.jpeg" />
        </div>
      </div>
    </div>
  </body>
</html>

如果我们想创建图像滑块或者幻灯片，我们可以在此处找到所有有用的信息。

日期：2020-06-02 22:15:02 来源：oir作者：oir

←如何创建闪亮的文字动画效果

如何使用纯 CSS 创建打字机文本→

创建 HTML

添加 CSS

使用 HTML 和 CSS 创建画廊的示例：

目录