使用 HTML CSS 和 JavaScript 创建 Flex Panel Gallery
使用 HTML CSS 和 JavaScript 创建 Flex Panel Gallery
这个 技术表 将教您如何创建弹性面板库 .任何人都可以使用基本的 HTML、CSS 和 JavaScript 知识创建弹性面板库。
Flex 面板库是一个面向初学者的 CSS 项目。读完这篇文章，你将了解基本的 HTML 标签，以及一些重要的 CSS 属性，例如 margin、padding、box-sizing、display、justify-content、align-items、flex-direction、height、min-height、flex、background-图像，盒子阴影，过渡等。
此外，您将学习如何使用 CSS @媒体 .
在这篇文章中，我将向您展示如何使用 HTML、CSS 和基本的 JavaScript 代码创建一个弹性面板库。
让我们编码！
HTML
将此 HTML 代码添加到 index.html 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柔性面板库</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="panel_wrapper">
<div class="panel panel1"></div>
<div class="panel panel2"></div>
<div class="panel panel3"></div>
<div class="panel panel4"></div>
<div class="panel panel5"></div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS
将这些样式添加到 style.css 文件中。
*,
*：：后，
*：：前 {
边距：0；
填充：0；
box-sizing：边框框；
}
.panel_wrapper{
显示：弯曲；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
。控制板{
弹性：1；
高度：100vh；
背景：#4b87cf 中心/封面；
盒子阴影：插图 0 0 0 5px rgba(255, 255, 255, .1);
过渡：flex .7s 缓进出；
}
/*=====点击每个面板后=====*/
.panel.open{
弹性：5；
}
/*===== 为每个面板添加背景图片 =====*/
.panel1 {
背景图片：网址（https://source.unsplash.com/gYl-UtwNg_I/1500x1500）；
}
.panel2 {
背景图片：网址（https://source.unsplash.com/rFKUFzjPYiQ/1500x1500）；
}
.panel3 {
背景图片： url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793;c)c)
}
.panel4 {
背景图片：网址（https://source.unsplash.com/ITjiVXcwVng/1500x1500）；
}
.panel5 {
背景图片：网址（https://source.unsplash.com/3MNzGlQM7qs/1500x1500）；
}
@media only screen and (max-width: 574px) {
.panel_wrapper {
弹性方向：列；
}
。控制板 {
高度：自动；
宽度：100vw；
}
}
JavaScript
在 JavaScript 中，我们将使用 查询选择器 选择 index.html 文件的所有面板元素。然后我们将使用一个 为每个 使用向每个面板添加点击事件的方法 添加事件监听器 .
然后我们将创建一个 toggleOpen() 函数来为所有面板元素添加一个开放类。在这里，我们将使用 toggle() 方法 类列表 .
将此 JavaScript 代码添加到 script.js 文件。
// 选择所有面板
常量面板 = document.querySelectorAll('.panel');
panel.forEach(panel => panel.addEventListener('click', toggleOpen));
函数切换打开（）{
this.classList.toggle('open');
}
CSS Flex 面板库在 Rahi 的代码上使用 HTML、CSS 和 JavaScript
看这个 使用 Rahi YouTube 频道编写代码 .在下面让我知道您对此的看法 CSS 弹性面板库 ！
如果您觉得它对初学者有帮助，请不要忘记订阅更多关于网页设计的视频！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
