当前位置: 首页 > Web前端 > CSS

CSS面试题:手写折叠(折叠)css-html部分

时间:2023-03-30 22:43:56 CSS

源码:https://github.com/any86/5a.c...做一个组件库并不难。其实vue/react等框架的出现,让自己做一个ui变得简单,大部分的js逻辑都被库封装了,但是组件的代码主要是css,所以只要css写完,一个组件已经完成了60%以上。为你的职业生涯创造未来Wheelvue3即将发布,所有现有的vue组件库将被重新构建。这又是造轮子和收集星星的好时机。想趁机建个组件库,开始吧:最终效果普通版简化版html

唐诗

唐诗,泛指唐代诗人所创作的诗歌。唐诗是中华民族宝贵的文化遗产之一,是中华文化宝库中的一颗明珠。对世界上许多民族和国家的文化发展也产生了很大的影响。风土人情、文化等具有重要的借鉴意义和价值。

宋词

宋词是盛行于宋代的中国文学体裁,是与古体诗歌相比的新体诗歌之一,标志着宋代文学的最高成就。宋词句长句短,易唱。因为是和乐的歌词,所以又叫旋律、乐府、乐章、时长……

元曲

元曲是元代流行的一种文学形式,包括杂剧和散曲。指戏剧。杂剧是宋代以幽默为特色的表演形式,到元代发展成为戏曲。每册以四折为主,首部或折间加楔子,每折由同宫腔同韵的北曲套曲、滨白组成。如关汉卿的《窦娥冤...灰色-100:#f8f9fa!default;$gray-300:#dee2e6!default;.a-collapse{overflow:hidden;border-radius:$radius*2;border:1pxsolid$gray-300;&__item{&:nth-of-type(n+2){border-top:1pxsolid$gray-300;}>header{背景颜色:$gray-100;padding:2*$space;font-size:14px;cursor:pointer;>i.icon-arrow{width:1em;height:1em;display:inline-block;vertical-align:middle;background-image:url('data:image/svg+xml;utf8,')}>p{display:inline-block;vertical-align:middle;font-weight:bold;}}>article{display:none;padding:$space;font-size:14px;}}//Expanded&__item{&--open{>header{border-bottom:1pxsolid$gray-300;>i.icon-arrow{transform:rotate(90deg);}}>article{display:block;}}}//简化版本&--simplify{border:none;.a-collapse__item{>header{border:none;background-color:transparent;}}}}js本文不想讲js,如果你有兴趣,剩下的js工作由你完成,等vue3发布的时候,我会结合ts实现一个完整的组件。逻辑简要:添加一个“到组件”手风琴“选项,即只能同时打开一个“页面”。每次点击header标签,都会触发“页面”的合并和展开。“合并/展开”添加动画效果,提醒需要js计算“页面”的高度,才能实现“饿了么ui”中的折叠组件“合并/展开”同一个动画。哎,js的功夫不多,看看就这样吧!