使用 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 文件中。

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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38642/30172211