发表于: 2018-06-18 22:01:52
1 627
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
开始任务六。
首先学习了css sprites的制作方式。通过Photoshop将需要的图片切下来。
然后导出使用工具将其制作成雪碧图。
通过其坐标插入到盒子中。
雪碧图一开始是作为背景整个插入到所有的图标小盒子中。
然后通过background position坐标定位将背景图片定位到准确的图标位置。
坐标的话。。需要记住是负的。。。
然后使用position fixed将header和footer固定在顶部和底部。在使用flex布局,将内部的元素摆放在合适的位置。
熟悉了sprites图的使用。。。
然后将之前的div的span的header改成button。。。。麻蛋以后不把东西写一起了。。改的好费劲...做的时候图省力
改的时候要老命。
整体来说还是在学习布局方法和语句的使用。
另外学习了一下css绘制图形的简单方法
https://www.cnblogs.com/Mr-liyang/p/6673854.html
之后学习了使用css模拟下拉选框,基本原理就是在平常的时候选框是通过display none隐藏。
然后通过伪属性:hover,鼠标悬浮在button上时触发设置display block进行显示。
这里选框需要使用绝对定位position absolute进行定位,因为选框本身是一直存在的,需要固定其位置。
只有在悬浮在button上时才会触发显示。。所以要确定选框的位置。另外由于层级问题,会导致选框被下方更高级的层遮挡挤压。
所以选框需要设置为z-index。
然后稍微看了一下省略文本的问题。
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*文本溢出省略号*/
white-space: nowrap;/*不换行*/
明天计划的事情:(一定要写非常细致的内容)
争取完成任务6.复习总结。
遇到的问题:(遇到什么困难,怎么解决的)
基础语句不熟悉,遇到布局不明确的地方,没办法想出解决办法。
收获:(通过今天的学习,学到了什么知识)
温故知新
评论