发表于: 2019-04-30 20:43:36
1 752
今天完成的事情:
1.完成并提交任务六
2.学习任务七资料并完成部分
明天计划的事情:
1.完成任务七一张图
遇到的问题:
1.做任务六的时候发现大于号没有跟文字对齐
1.1 询问师兄后发现是因为我大于号是旋转来的,他的原来位置还是占着的,对齐
也是按原先的位置对齐,所以会出现这种情况,用translate调整一下即可
2.做任务六的时候发现滑动页面的时候大于号会浮在第一行,第二行上方
2.1 询问师兄后发现是因为我大于号设置的标签是button,而且没有文本是单纯的
背景色,所以会浮在那上面,用z-index:1即可
收获:
1. 学习了文本溢出的时候变成省略号,主要使用overflow:hidden(溢出的文本不显示)
text-overflow:ellipsis;(溢出的文本显示省略号),white-space:nowrap;(文字
一行显示,不换行)最后设置宽度即可
2.background简写:background:bg-color bg-image position/bg-size bg-repeat
任务名称:CSS任务六
成果链接:https://chenchenchen96.github.io/task/Task6/html/Task6.html
任务耗时: 2019.4.28-2019.4.30
官网脑图:
我的脑图:
任务总结:
1.学到自己编写下拉列表
1.1 运用relative做父元素,隐藏元素用display:none,absolute ,下拉显示运用伪元素hover
2.文本移除显示省略号
2.1 文本溢出不显示overflow:hidden 文本不换行white-space:nowrap 溢出显示省略号text-overflow:elipsis
3.雪碧图的应用
3.1 把需要的背景图全都合到一张,用background-position控制显示图片
4.自己编写大于号
4.1 用border画上相邻的两条线,如上左,设置好宽度颜色,然后用transform,translate,rotate调整
评论