使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面

最新推荐文章于 2022-08-31 17:23:25 发布

前端码农..

最新推荐文章于 2022-08-31 17:23:25 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/BYGFJ/article/details/123290916

版权

本文档详细介绍了如何使用 HTML、CSS 和 JavaScript 制作一个响应式的可过滤图片库，包括创建基本结构、设计导航栏、添加图片、实现响应式布局以及运用JavaScript进行交互设计。通过步骤讲解，读者将学会如何打造一个包含多个类别的游戏和工具展示页面。

摘要由CSDN通过智能技术生成

第 1 步：创建基本结构

我已经使用我自己的 HTML 和 CSS 代码创建了这个图片库的基本结构。这里我用background-color: # 2a2932 和 min-height: 100vh。

HTML

<section class="gallery">
	<div class="container">
  
	</div>
</section>

CSS

.gallery{
   width: 100%;
   display: block;
   min-height: 100vh;
   background-color: #2a2932;
   padding: 100px 0;
}

.container{
	max-width: 1170px;
	margin:auto;
}

演示效果

是的，你没看错，现在就是一团黑。

🕍 第 2 步：为类别创建导航栏

现在我已经使用下面的 HTML 和 CSS 代码创建了一个导航栏。正如我之前所说，有一个导航栏，所有类别都在其中进行了排序。在这里，我使用了 5 个主题和 15 个图片。如果需要，你可以增加或减少类别的数量。

类别中的文本具有按钮的形状。这些按钮中的文字是font-size: 17px 并且颜色是白色的。 Border: 2px solid white 用于制作按钮大小的文本。

HTML

<div class="row">
 <div class="gallery-filter">
   <span class="filter-item active" data-filter="all">所有</span>
   <span class="filter-item" data-filter="tool">工具</span>
   <span class="filter-item" data-filter="game">游戏</span>
   <span class="filter-item" data-filter="3D">3D风格游戏</span>
   <span class