50 Projects 50 Days - Expanding Cards 学习记录

最新推荐文章于 2024-08-21 09:58:17 发布

机计复计机

最新推荐文章于 2024-08-21 09:58:17 发布

阅读量182

点赞数

分类专栏：前端基础文章标签： javascript 前端 css css3 html

本文链接：https://blog.csdn.net/weixin_44982066/article/details/129914750

版权

这篇博客记录了作者在50 Projects 50 Days活动中学习Expanding Cards的过程，主要介绍了如何利用CSS flex布局和JavaScript实现卡片展开效果。文章详细阐述了HTML结构、CSS样式和JavaScript逻辑，强调了拉伸比例在实现卡片展开中的关键作用，并提供了代码示例。

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

50 Projects 50 Days不使用任何前端框架，适合初学者练手，巩固前端基础，在这里记录一下学习过程，尤其是一些细节上的问题。

项目地址

Expanding Cards

展示效果

Expanding Cards
在这里插入图片描述

实现思路

其实很简单，就是利用flex布局中设置不同的拉伸比例来实现展开效果，通过设置一个特殊的class，这个class的拉伸比例设置为较大的值，再通过JavaScript将该class的设置与点击事件进行绑定即可实现。

实现细节

HTML结构

使用container包裹作用只是为了限制左右宽度而已，去掉container结构对样式影响不大。
container内，每个div只包含一个H3标题子元素，图片部分通过背景样式填充。

<div class="container">
     <div class="panel active" id="World">
         <h3>World</h3>
     </div>
     <div class="panel" id="Forest">
         <h3>Forest</h3>
     </div