今日的CSS小案例

个人名片：
作者简介：一名大一在校生，web前端开发专业
个人主页：几何小超
座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
**学习目标:坚持每一次的学习打卡，学好前端

今天需要做的是原神的手风琴，看其他挺好玩，我就做了一个，现在还是把展示图放出来吧哈哈，因为本人也是个二次元LSP

点击之后实现悬浮效果，看起来挺好看的，然后让咱们一起来设置

架构

这个布局相对于简单一点，有一个大盒子shell

里面放了一个版心card

然后把图片放盒子里面

下面的文字放另外一张盒子里面

凝光

多莉

刻晴

七七

纳西妲

雷电将军

可莉

芭芭拉

简单介绍一下架构之后，接下展示css代码，里面大量运用到了子集选择器，伪类选择器

介绍一下子集选择器><是指选择这个内容里面单独的内容

还是老规矩清除默认边距然后在加上css3盒子模型

给body设置弹性布局，然后缩放盒子大小，加上背景颜色，基本的样式就完成

然后其他的我相信大家都应该清除差不多了，不懂的再去查查资料这里就重点讲几个标签

今天的练习中遇到的两个新标签

object-fit属性用于指定应如何调整

凝光

多莉

刻晴

七七

纳西妲

雷电将军

可莉

芭芭拉