50 Projects 50 Days不使用任何前端框架,适合初学者练手,巩固前端基础,在这里记录一下学习过程,尤其是一些细节上的问题。
项目地址
展示效果
实现思路
其实很简单,就是利用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