使用HTML和CSS创建简单的响应式图片库

本文将介绍如何使用HTML和CSS创建简单的响应式图片库，帮助小白快速上手。

一、HTML结构

在开始之前，我们先来看一下HTML结构，具体如下：

<div class="gallery">
  <div class="pic">
    <a href="#">
      <img src="img/1.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
  <div class="pic">
    <a href="#">
      <img src="img/2.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
  <div class="pic">
    <a href="#">
      <img src="img/3.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
</div>

其中，<div class="gallery">是图片库的容器，<div class="pic">是每个图片的容器，<a>是每个图片的链接，<img>是每个图片的具体内容。

二、CSS样式

接下来，我们需要为HTML结构添加CSS样式，使其成为一个响应式图片库。

/* 图片库容器 */
.gallery {
  display: flex;
  flex-wrap: wrap;
}

/* 图片容器 */
.pic {
  width: 25%;
  padding: 10px;
}

/* 图片链接 */
.pic a {
  display: block;
}

/* 图片 */
.pic img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 响应式 */
@media screen and (max-width: 768px) {
  .pic {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .pic {
    width: 100%;
  }
}

以上是CSS样式的具体内容，其中flex用于实现图片的自适应布局，border-radius用于设置图片圆角，max-width用于设置不同屏幕尺寸下图片容器的宽度。

三、完整代码

最后，我们将HTML和CSS的代码整合在一起，形成完整的响应式图片库代码，如下所示：

<div class="gallery">
  <div class="pic">
    <a href="#">
      <img src="img/1.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
  <div class="pic">
    <a href="#">
      <img src="img/2.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
  <div class="pic">
    <a href="#">
      <img src="img/3.jpg" alt="翻滚的胖子博客">
    </a>
  </div>
</div>

<style>
/* 图片库容器 */
.gallery {
  display: flex;
  flex-wrap: wrap;
}

/* 图片容器 */
.pic {
  width: 25%;
  padding: 10px;
}

/* 图片链接 */
.pic a {
  display: block;
}

/* 图片 */
.pic img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 响应式 */
@media screen and (max-width: 768px) {
  .pic {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .pic {
    width: 100%;
  }
}
</style>

以上就是本文的全部内容，希望对小白们有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： HTML中的表单验证和提交处理技巧
• 下一篇： HTML中的表单多选框和选项样式化技巧