手风琴页面html,滑动手风琴的制作（只涉及HTML+css）

这次作业是通过HTML和css制作滑动手风琴，使鼠标指在图标时让内容通过滑动的方式显示出来。

滑动手风琴展示

图标可以通过阿里巴巴矢量图标库寻找，也可以通过链接bootcdn中的图标库，如下图

BootCDN

在

中进行链接

链接

本次学习的重点内容为以下几点：

1.制作出滑动效果，运用的是transition标签,transition为过渡动画效果，可用来设置滑动效果代码如下图

transition

2.使用消除浮动来设置图标前后变化，如.class a::after,.class a::before

css

3.当网页大小改变时，设置内容随网页大小变化的样式，即页面响应式。css如下，运用的是@media.标签。

页面响应

页面变化效果

4.这次作业设置的边框，背景较多，需要设置合理的class名，将同类的代码放在一起，方便检查错误。

5.overflow是用来设置内容溢出时会发生的情况，如hidden则是内容溢出会被削减

小结：通过学习这次的标签，可以让页面显示更加简洁优美。但是想要熟悉的使用这些标签还得多练习和背诵。这次也是通过模仿视频中的位置来定位元素，以后需要更多学习寻找元素位置的方法，如使用截图软件或者ps，可以大大节省时间。希望以后可以继续进步。