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

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gaming Tools Showcase</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Gaming Tools Showcase</h1>
        <input type="text" id="search" placeholder="Search for a game or tool..." />
    </header>
    <section>
        <ul id="games">
            <!-- Game and tool cards will be added dynamically using JavaScript -->
        </ul>
    </section>
    <script src="script.js"></script>
</body>
</html>




/* styles.css */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
 
header {
    background-color: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
header h1 {
    margin: 0;
}
 
header input {
    padding: 8px;
    font-size: 16px;
}
 
section {
    flex: 1;
    padding: 10px;
}
 
#games {
    list-style-type: none;
    padding: 0;
}
 
/* Card styles */
.card {
    margin-bottom: 10px;
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
 
.card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
 
.card h2 {
    margin: 0;
    font-size: 16px;
}
 
.card p {
    margin: 0;
    color: #666;
}




// script.js
document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('search');
    var gameCards = document.getElementById('games').getElementsByClassName('card');
 
    searchInput.addEventListener('input', function() {
        var searchQuery = searchInput.value.toLowerCase();
        Array.from(gameCards).forEach(function(card) {
            var title = card.querySelector('h2').textContent.toLowerCase();
            if (title.indexOf(searchQuery) !== -1) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

这个示例展示了如何创建一个简单的响应式搜索界面，用户可以在其中输入以搜索游戏或工具名称。JavaScript 监听输入框的变化，并使用数组的 filter 方法来过滤结果，从而实现本地

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

评论已关闭

推荐阅读