发表于： 2019-05-24 21:23:28
1 918
今天完成的事情：
1,完成了任务十四十五，今天页面三是用flex来布局的，又复习了flex的一些知识。
参考：https://blog.csdn.net/sinat_19803127/article/details/81905202
https://segmentfault.com/a/1190000011618723
2，三条横线的写法可以用上下边框和内容背景色来实现，用到了background-clip：content-box属性：
3，折叠导航栏用到了复选框的不同状态结合媒体查询来实现的
4，轮播图焦点图标用到了动画amination和@keyframes
参考：https://blog.csdn.net/dengdengda/article/details/53006026
https://www.cnblogs.com/McChen/p/4702511.html
明天要做的事情：开始js的学习
遇到的问题：无
收获：css任务完成，开始js学习
任务总结：
任务名称：css-task-14-15 任务总结
成果链接：https://travelerone.github.io/learngit/task15/task15.html
任务耗时：2019.5.22 - 5.25(4天)
官网脑图：
我的脑图：
任务总结：
这次任务主要是不用bootstrap来布局和写导航栏写轮播图
布局可以用float来布局，也可以用flex来布局，利用浮动做网格系统，先设置每一列向左浮动，再设置每一行清除浮动。
用css实现轮播图要用到两个东西：@keyframes，规则是创建动画。@keyframes规则是指定一个css样式和动画将逐步从目前的样式更改为新的样式
animation动画属性
轮播图的焦点图标也是用到了这两个东西，每个小圆设置一个动画，然后显示的时候和轮播图显示同步就可以了
返回列表
评论