今天完成的事情: 完成任务7及深度思考、复习伪类、背单词
明天计划的事情:开始任务8
遇到的问题:播放器样式更改比较复杂,把播放器播放按钮调到播放图标处后用的透明度隐藏播放器
收获:通过完成任务7对前边的知识有了一个整体的复习
任务总结:
做任务7没感觉到什么困难,遇到了几个小问题
1、师兄新加了一条页面二方格等比例放大的要求,由于忘记了vw单位,导致卡壳
2、使用iconfont,图标突然就不显示了,没有更新iconfont代码导致的
3、用opacity设置透明度子级也继承了,
解决办法,1、设置透明度的盒子单独拿出来用,2、只是设置背景透明度可以使用rgba
4、页面二投票悬停用的溢出隐藏,实现了,不知道有没有什么问题
5、播放器样式更改比较复杂,把播放器播放按钮调到播放图标处后用的透明度隐藏播放器
每日计划
待完成的事
伪类
同一个标签,根据不同的状态,有不同的样式,这就叫做伪类。伪类用“:”表示。伪类分为静态伪类和动态伪类
静态伪类(只能用于超链接)
- :link {超链接点击之前的状态}
- :visited{超链接点击之后的状态}
动态伪类(针对所有标签)
- :hover{鼠标在标签上悬停显示的效果}
- :active{鼠标点击不松手的效果}
- :focus{焦点,鼠标点击后获得的效果,点击其他标签,效果消失}
注意
- :link / :visited / :hover / :active必须按照顺序书写样式
- :link / :visted同生共死
- 子级使用时 .父级 :伪类 .子级{ }
任务7深度思考
1.什么是CSS sprites?
sprites 直译精灵,谐音雪碧图,一般页面出现多个小图标是使用,可以减少http获取图片的次数,提升效率
2.什么是浮动?有哪些清除浮动的方法?
浮动使一个元素脱离文档流,让块级元素可以在一行显示,
清除浮动可以给元素自身使用{clear:left / right / both(全部)/none(两边可以有)}还可以设置一个空<div>清除
3-1.rgba和opacity的透明效果有什么不同?
rgba是背景色或者颜色透明度,不继承
opacity是全部透明度,子级继承
3-2.display和visiblity有什么区别?
{visiblity: hidden}元素被隐藏时还占用之前的空间
{display:none},元素被隐藏时不占用空间
4.描述下z-index和叠加上下文是如何形成的?
z-index:数值越大,层级越高
拓展延伸 overflow属性当内容溢出元素框时发生的事情
visible默认值,内容不会被裁剪,会呈现在元素框之外
hidden内容会被裁剪,元素框外的内容不可见
scroll内容没超出元素框,也会出现滚动条
auto内容没超出元素框,不会出现滚动条
inherit继承父级
记最少五个单词
margin 外边距
border 边框
padding 内边距
content 内容
width 宽
height 高
display 显示
inline 内联
block 块
button 按钮
学习计划
以后每天最少记5个单词
评论