在本文中,我将向大家展示如何使用 HTML 和CSS 代码创建 「响应式猫猫图片库」。之前我也做了一个使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面。 我们会在一些图片壁纸类网站上看到这样的图片库。许多类型的图像整齐地排列在一起。这种类型的设计最常用于个人网站或图片下载网站。如果你想知道「什么是响应式猫猫图片库」,让我来告诉你。 响应式是网页设计中一个非常流行的词。作为响应式设计,任何屏幕尺寸的用户都可以使用。这意味着在任何设备的情况下,此设计都可以根据该设备的屏幕大小进行自我调整。 下面我提供了一个现场演示,可以帮助大家了解此图片库的工作原理。 (复制下面链接到浏览器打开👇👇👇)
「可点击左下角阅读全文查看效果」 希望上面的演示已经帮助你弄清楚它是如何工作的。这个设计最重要的一点是你可以在这里使用不同大小的图像。 正如你在上面看到的,这个「响应式猫猫图片库」有多种尺寸的图片。有些图像尺寸很大,有些图像很小,有些图像很长。换句话说,这里的图像大小是随机的。它是完全响应。每当你在小型设备上使用滑块时,都可以在列中看到图像。 如何使用 HTML 和 CSS 创建响应式图片库现在开始创建 响应式猫猫图片库。首先,你需要创建一个 HTML 和 CSS 文件。在你的设备上打开编辑器以创建 HTML 文件。下面我给出了 HTML 和 CSS 代码,你可以复制粘贴使用它们。 步骤 1:使用以下 HTML 代码添加图像我从 pinterest 上找了一些猫猫图片,下面是「图片库」的「基本HTML结构」
部分图片如下 第 2 步:使用 CSS 代码设计图库我使用了下面的 CSS 代码设计了它。在这种情况下,不需要使用过多的 CSS 代码。我只使用 CSS 代码对图像进行排序并进行一些基本设计。column-count:6;将图像分成最多6列。 我也放了一个 20px的距离在每一列的中间。结果,图像看起来有点空白。你可以复制 css 代码,然后将其粘贴到你的 css 文件中。或者使用 style 标签将这些代码添加到 HTML 文件中。
第 3 步:使图像滑块具有响应性我用了以下代码使它具有「完全响应」。因为我是通过 CSS 做出响应的,所以我使用了@media 确定如何查看不同皮肤的这些图像。如果你要使用Bootstrap构建此「滑块」,则无需使用单独的 CSS 代码使其响应。你可以复制这些代码,然后将它们添加到你的 CSS 文件中。
到这里就已经大功告成了,怎么样,是不是很简单 end 个人简介:HDZ核心组成员,华为云享专家全栈领域博主,CSDN原力计划作者,掘金优秀作者,资讯创作者,公众号【海拥】,全网粉丝3万+。我是一个爱好计算机科学,求索于逻辑思维的同时不忘哲学和浪漫主义科学,乐于分享技术与快乐的博主。博文内容涉及Java,Python,HTML/CSS/JS及SEO,数据结构等。 |
|