??使用 HTML、CSS 和 JS 創建回應式可過濾的游戲+工具展示頁面 ??-有解無憂

在這里插入圖片描述

回應式可過濾的游戲+工具展示頁面用于各種網站以按類別對影像進行排序，在本文中，我將向您展示如何借助 HTML CSS 和 javascript 創建回應式可過濾的游戲+工具展示頁面，

可過濾作品集是一種流行的網路元素，可用于各種網站，它是一種作品畫廊，大量作品整齊地排列在一起，值得注意的一點是，所有作品都可以在這里按類別排序，有一個導航欄，其中對所有類別進行了排序，單擊這些類別中的任何一個時，然后可以看到該類別中的所有作品，而隱藏其余作品，結果，用戶可以輕松地找到他選擇的影像，

我首先在網頁上創建了一個導航欄，在這里創建了五類按鈕，一共使用了15張圖片，如果需要，您可以使用這更換作品或者添加更多作品，在導航欄中的分類中，你可以看到與您點擊的分類相關的作品，同樣，當您單擊另一個類別時，該類別的作品將被看到，其余的將被隱藏，我讓它完全回應，以便它可以在所有設備上使用，

🍰 在線演示

🍺 在線演示地址

http://haiyong.site/moyu

提示：原始碼相信大家應該都知道怎么獲取，直接F12 或者ctrl+u ，感興趣的小伙伴可以把網址收藏起來，后面我會繼續更新，打造一個擁有100個游戲+工具的摸魚網站，目前進度：15/100

🚀 bilibili演示視頻

游戲工具展示集合

🏆如何使用 HTML 和 CSS 創建可過濾的游戲+工具展示頁面

- 🍰 在線演示
- - 🍺 在線演示地址
  - 🚀 bilibili演示視頻
- ? 第 1 步：創建基本結構
- 🕍 第 2 步：為類別創建導航欄
- 🥇 第 3 步：將圖片添加到圖庫
- 🎯 第 4 步：設計上面添加的專案
- 🧀 第 5 步：使可過濾的圖片庫具有回應性
- 🧯 第 6 步：現在使用 JavaScript 執行此設計
- 🛬 wuhu ! 起飛 !

我已經通過下面的圖文向初學者展示了如何為初學者制作它的完整步驟，當然，你也可以使用文章底部的下載按鈕下載所需的源代碼，

我使用下面的 CSS 代碼完成了網頁的基本設計，

body{
	line-height: 1.5;
	font-family: sans-serif;
}
*{
	margin:0;
	box-sizing: border-box;
}

.row{
	display: flex;
	flex-wrap: wrap;
}
img{
	max-width: 100%;
	vertical-align: middle;
}

? 第 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="filter-item" data-filter="cellphone">手機端游戲</span>
 </div>
</div>

CSS

.gallery .gallery-filter{
   padding: 0 15px;
   width: 100%;
   text-align: center;
   margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
   color: #ffffff;
   font-size: 17px;
   border: 2px solid white;
   text-transform: uppercase;
   display: inline-block;
   border-radius: 20px;
   margin-right: 8px;
   cursor: pointer;
   padding: 8px 20px 8px 20px;
   line-height: 1.2;
   transition: all 0.3s ease;
}

演示效果
在這里插入圖片描述
我用下面的一些 CSS 代碼設計了活動按鈕，也就是說你在此處單擊的類別會發生一些變化，這里的變化由下面的 CSS 代碼決定，背景顏色和邊框顏色將變為藍色，

CSS

.gallery .gallery-filter .filter-item.active{
  color: white;
  border-color : #16b5ef;
  background: #16b5ef;
}

演示效果
在這里插入圖片描述

🥇 第 3 步：將圖片添加到圖庫

現在我已經使用以下 HTML 代碼添加了所有影像，在這里我添加了 15 個專案，在第一個 div (<div> </div>) 中給出了所使用的類別，這里我為每個影像使用了兩個 div，

HTML

<div class="row">
	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/aircraft-avoid-obstacles"><img src="http://haiyong.site/wp-content/uploads/2021/07/aircraft-avoid-obstacles.png"></a>
		</div>
	</div>

	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/penhuolong"><img src="http://haiyong.site/wp-content/uploads/2021/08/penhuolong.png"></a>
		</div>
	</div>
	
	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/game/lion"><img src="http://haiyong.site/wp-content/uploads/2021/07/lion.png"></a>
		</div>
	</div>

	<div class="gallery-item game cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/santa-claus"><img src="http://haiyong.site/wp-content/uploads/2021/07/santa-claus.png"></a>
		</div>
	</div>
 
   //...等等一共15個小專案，太長我就不一一列出影響閱讀了，需要原始碼在文首或文末自取
</div>

🎯 第 4 步：設計上面添加的專案

現在我已經使用 CSS 代碼精美地排列了這些專案，在這里我在每列中使用了三個專案，使用代碼width: calc (100% / 3)將這三個專案放在每一列中，在這里，如果你想在每列中放置四個影像可以使用 4 替換 3，

CSS

.gallery .gallery-item{
	width: calc(100% / 3);
	padding: 15px;

}
.gallery .gallery-item-inner img{
	width: 100%;
    border: 3px solid #d4dad9;
}

演示效果
在這里插入圖片描述
我通過@keyframes 使用了影片，當你單擊一個類別時，這些類別中的每一個都將與影像并排顯示，例如，如果您單擊具有四個影像的類別，第一行有兩個影像，第二行有兩個影像，

當您單擊此類別時，該類別其余部分中的所有影像將被隱藏，所有四個影像將并排顯示，以下代碼已用于使此重定位更加生動，此處使用了 0.5 秒，這意味著更改該位置需要 0.5 秒，

CSS

.gallery .gallery-item.show{
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

當您單擊一個類別時，其他所有其他專案都將被隱藏，此時display: none已被使用，也就意味著無法看到這些專案，雖然它有效，但我是在 JavaScript 的幫助下完成的，現在我只是把資訊放進去，然后我在 JavaScript 代碼的幫助下實作了它，

CSS

.gallery .gallery-item.hide{
	display: none;
}

🧀 第 5 步：使可過濾的圖片庫具有回應性

現在我已經使用 CSS 代碼的媒體查詢使它具有回應性，在這里，我們為移動設備和標簽添加了單獨的資訊，

CSS

@media(max-width: 491px){
	.gallery .gallery-item{
		width: 50%;
	}
}
@media(max-width: 667px){
    .gallery .gallery-item{
		width: 100%;
	}
	.gallery .gallery-filter .filter-item{
		margin-bottom: 10px;
	}
}

在我手機上的演示效果
在這里插入圖片描述

🧯 第 6 步：現在使用 JavaScript 執行此設計

上面我們剛剛設計了它，現在我們將使用 JavaScript 代碼實作它，換句話說，如果我們點擊此導航中的類別，我們將執行該類別的影像，以便可以看到它們，

首先設定gallery-filter 和gallery-item 的常量，因為我們知道在 JavaScript 中沒有任何 ID 或類函式可以直接使用，

JavaScript

const filterContainer = document.querySelector(".gallery-filter");
const galleryItems = document.querySelectorAll(".gallery-item");

我已經使用下面的 JavaScript 代碼實作了這些類別按鈕，

JavaScript

filterContainer.addEventListener("click", (event) =>{
   if(event.target.classList.contains("filter-item")){

     // 停用現有的 active 'filter-item'
   	filterContainer.querySelector(".active").classList.remove("active");

     // 啟用新的 'filter-item'
   	event.target.classList.add("active");

   	const filterValue = event.target.getAttribute("data-filter");

   	galleryItems.forEach((item) =>{

       if(item.classList.contains(filterValue) || filterValue === 'all'){
       	item.classList.remove("hide");
       	 item.classList.add("show");
       }

       else{
       	item.classList.remove("show");
       	item.classList.add("hide");
       }

   	 });
   }
 });

到此就完成了，希望從上面的教程中，你已經學會了如何創建這個可過濾的游戲+工具展示頁面，您可以直接在你自己的任何專案中使用它，因為它也采用了回應式，你可以看到我已經做過的更多這樣的設計，

🛬 wuhu ! 起飛 !

希望通過本文，您已經學會了如何使用 HTML、CSS 和 JS 創建回應式可過濾的游戲+工具展示頁面，我之前使用 HTML、CSS 和 JavaScript 制作了更多型別的小工具，如果您愿意，可以查看這些設計，

使用 HTML、CSS 和 JavaScript 制作的隨機密碼生成器
使用 HTML、CSS、JS 和 API 制作一個很棒的天氣 Web 應用程式
你真的熟練運用 HTML5 了嗎，這10 個酷炫的 H5 特性你會幾個？
11個基于HTML/CSS/JS的情人節表白可愛小游戲、小影片【情人節主題征文】

我已經寫了很長一段時間的技術博客，并且主要通過CSDN發表，這是我的一篇 Web 回應式可過濾的游戲+工具展示頁面教程，我喜歡通過文章分享技術與快樂，您可以訪問我的博客： https://haiyong.blog.csdn.net/ 以了解更多資訊，希望你們會喜歡！😊

💌 歡迎大家在評論區提出意見和建議！💌

如果你真的從這篇文章中學到了一些新東西，喜歡它，收藏它并與你的小伙伴分享，🤗最后，不要忘了?或📑支持一下哦，

完整的源代碼：點擊此處下載

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/297561.html

標籤：其他

上一篇：利用xdist實作自動化測驗用例并行執行

下一篇：測驗從零開始-No.8-在作業中是如何撰寫測驗用例的？