发表于: 2019-05-25 23:24:10

1 813


今天完成了什么:

完成任务6。

今天遇到了什么问题:

1 开始设置主体文字内容的时候结构没掌握好。a标签里面还嵌套了a标签,导致多出一行a标签的盒子出来。a标签不能够包裹a标签--学到了。
2 修改结构后发现文字跑到筛选了上面去了,才知道是筛选栏是没有做背景颜色,另外内容文字没有设置margin-top间距,导致文字往上面挤。


3 左边文字不显示居中后来才知道需要添加弹性盒子,并且设置justify-content:center和align-items:center居中。

4 省略号虽然成功,但是有挤下来了。后来给予文字设置一定的宽度即可显示,



设置小图标的时候上下不对齐。一开始是使用topleft这些单独给盒子设置小图标跟文字居中,后来怎么对都没用,才想起来需要添加个大盒子给他们,然后设置高度,再设置line-height高给他们居中属性。

收获了什么:

1.万物都是盒子,居中居中,弹性弹性。

2.学会使用过渡效果,在装他们的盒子里设置transition属性,如果想要由上往下过度则设置高为0,然后再:hover选择器添加需要显示出来的高度或者宽度即可。

明天计划:

写任务7


任务名称:CSS任务6

成果链接:https://wangyhweb.github.io/Task/task6/task6.html

任务耗时:6天

个人脑图:


任务总结:

任务6主要是对之前任务知识的梳理,居中和弹性盒子的方法使用,在雪碧图制作上花了一天时间,头部布局,主体内容,下拉列表,三角形底部导航等等都花了很多时间。

用脑图把各个内容的知识点梳理出来发现自己基础还是不牢固需要多去理解行行代码的意思,万物都是盒子,居中。




返回列表 返回列表
评论

    分享到