使用 HTML 和 CSS 创建响应式猫猫图片库

• 💂 个人网站:【 海拥】【摸鱼小游戏】
• 🤟 风趣幽默的人工智能学习网站：👉人工智能
• 💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• 💬 免费且实用的计算机相关知识题库：👉进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。

博主前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住也分享一下给大家，👉点击跳转到网站。

直接跳到末尾 去评论区领书

在本文中，我将向大家展示如何使用 HTML 和CSS 代码创建 响应式猫猫图片库。之前我也做了一个使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面。

我们会在一些图片壁纸类网站上看到这样的图片库。许多类型的图像整齐地排列在一起。这种类型的设计最常用于个人网站或图片下载网站。如果你想知道什么是响应式猫猫图片库，让我来告诉你。

响应式是网页设计中一个非常流行的词。作为响应式设计，任何屏幕尺寸的用户都可以使用。这意味着在任何设备的情况下，此设计都可以根据该设备的屏幕大小进行自我调整。

下面我提供了一个现场演示，可以帮助大家了解此图片库的工作原理。

https://haiyong.site/bizhi/maomaotupianku/

希望上面的演示已经帮助你弄清楚它是如何工作的。这个设计最重要的一点是你可以在这里使用不同大小的图像。

正如你在上面看到的，这个响应式猫猫图片库有多种尺寸的图片。有些图像尺寸很大，有些图像很小，有些图像很长。换句话说，这里的图像大小是随机的。它是完全响应。每当你在小型设备上使用滑块时，都可以在列中看到图像。

如何使用 HTML 和 CSS 创建响应式图片库

现在是我开始创建响应式猫猫图片库。首先，你需要创建一个 HTML 和 CSS 文件。在你的设备上打开编辑器以创建 HTML 文件。下面我给出了 HTML 和 CSS 代码，你可以复制粘贴使用它们。

步骤 1：使用以下 HTML 代码添加图像

我从 pinterest 上找了一些猫猫图片，下面是图片库的基本HTML结构

<div id="gallery" class="container-fluid">
	<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-1.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-2.jpg" class="img-responsive">	
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-3.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-4.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-5.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-6.jpg" class="img-responsive">	
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-7.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-8.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-9.jpg" class="img-responsive">
        <img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-10.jpg" class="img-responsive">
        <!-- 此处省略一亿张猫猫图片 -->
</div>

部分图片如下

第 2 步：使用 CSS 代码设计图库

我使用了下面的 CSS 代码设计了它。在这种情况下，不需要使用过多的 CSS 代码。我只使用 CSS 代码对图像进行排序并进行一些基本设计。column-count:6;将图像分成最多6列。

我也放了一个 20px的距离在每一列的中间。结果，图像看起来有点空白。你可以复制 css 代码，然后将其粘贴到你的 css 文件中。或者使用 style 标签将这些代码添加到 HTML 文件中。

#gallery{
  column-count:6;
  column-gap:20px;
}
    
#gallery img {
  width:100%;
  height:auto;
  margin: 4% auto;
  box-shadow:-3px 5px 15px #000;
  cursor: pointer;
  transition: all 0.2s;
}

第 3 步：使图像滑块具有响应性

我用了以下代码使它具有完全响应。因为我是通过 CSS 做出响应的，所以我使用了@media 确定如何查看不同皮肤的这些图像。如果你要使用Bootstrap构建此滑块，则无需使用单独的 CSS 代码使其响应。你可以复制这些代码，然后将它们添加到你的 CSS 文件中。

@media (max-width:1200px){
      #gallery{
      column-count:4;
      column-gap:20px;
    }
}
@media (max-width:800px){
      #gallery{
      column-count:3;
      column-gap:20px;
    }
}
@media (max-width:600px){
      #gallery{
      column-count:2;
    }
}

到这里就已经大功告成了，怎么样，是不是很简单

🥇 评论区抽粉丝送书啦

💌 欢迎大家在评论区提出意见和建议! (抽两位幸运儿送书，实物图如下)💌

《Vue.js全家桶零基础入门到进阶项目实战》

【内容简介】

Vue.js 是一套构建用户界面的渐进式框架，本书旨在帮助读者全面掌握 Vue.js 全家桶技术和单页面前后端分离项目开发，理解 MVVM 框架思想，让前端和后端开发人员快速精通 Vue.js 全家桶技术。
　　本书贯穿入门准备实操、基础核心案例、中级进阶实战、综合进阶项目进行讲解，循序渐进、环环相扣，通俗易懂，并分析为什么这样使用，让你知其所以然。包含的主要技术：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、拦截器、组件通信、跨域问题、上线部署等。
　　本书适合有 HTML、CSS、JavaScript 基础的 Vue.js 零基础小白、前端开发人员、后端开发人员。同时，也适合以下人员阅读：在校生，需要掌握流行的新技术，做到与职场同步；在职人员，工作中需要学习使用Vue；有基础学员，需要系统、全面、高效使用 Vue 技术。

也有不想靠抽，想自己买的同学可以参考下面的链接

京东自营购买链接：

《Vue.js全家桶零基础入门到进阶项目实战》- 京东图书

当当自营购买链接：

《Vue.js全家桶零基础入门到进阶项目实战》- 当当图书

📣 注意：

大家点赞关注，三天后也就是 11月8日 从评论区留言的同学中抽取两位送书

🌊 面试题库：Java、Python、前端核心知识点大全和面试真题资料
🌊 办公用品：精品PPT模板几千套，简历模板一千多套
🌊 学习资料：2300套PHP建站源码，微信小程序入门资料

如果中奖了联系不上则视为放弃，可以从下方公众号里找到作者的联系方式，每周都会送四本书，后面送书力度还会加大，一年送几百上千本不是问题，回复【进群】领书不迷路，群内 每位成员 我都会送一本。回复【资源】可获取上面的资料👇🏻👇🏻👇🏻