发表于： 2018-06-28 20:51:39
2 686
今天完成的事情：
今天改了ppt然后讲了小课堂，emmm，虽然准备不是很充分但是总算没有延期，下次会尽早做准备，拖延症是真的可怕，然后GitHub的使用不是很熟练，今天传ppt卡了很久，然后抽空看一下github的教程。写了任务七的深度思考还有任务总结，然后任务八切了图，看了相关资料，明天开始写任务八。
明天计划的事情：
明天敲任务八，然后敲任务八，一直敲任务八。看boostrap框架。
遇到的问题：
今天一直在弄小课堂，然后讲完之后，一直在摸索上传ppt，然后任务八，只是看一下，还没有开始写，所以没遇到什么问题。
禅道：
css-task7
任务开始：6.28
预计结束：6.30
禅道主页：http://task.jnshu.com/zentao/project-task-765.html
收获：
今天特意去看了html的空格
然后其他就是github的一些操作。
任务7-任务总结
任务耗时6天 超出预期3天。
任务链接https://wjxhd.github.io/task/html/task7.html
任务总结：
1.合理使用ul li标签
2.认识新标签audio
audio标签是html5的新标签用来定义声音，如音乐或其他音频
audio标签的值
autoplay 音频在就绪后马上播放，网页打开自动播放音乐
controls 显示控件，播放、暂停、声音按钮
loop 音乐循环播放，播放结束后再自动继续播放
muted 静音
preload 音频先加载，再播放
url 音频的地址
3.背景颜色半透明
css半透明
设置背景颜色半透明的样式
background：rgba(41,189,244,.6)
蓝色部分代表的是需要设置透明的颜色
红色部分代表的是透明度
1是代表不透明度是100%，透明度为0
.9是代表不透明度是90%，透明度为10%
.8是代表不透明度是80%，透明度为20%
.6是代表不透明度是60%，透明度为40%
.1是代表不透明度是10%。透明度为90%
0是代表不透明度是0，透明度为100%
其他的以此类推
4.vw主要用于页面视口大小布局，相对于rem，vm在页面布局上更加方便简单，vw逻辑非常清晰，"1vw ＝ 1/100th viewport width"，用viewport width的百分比来设置element width。
使用vw可做到雪碧图的自适应。
脑图
深度思考：
1.什么是CSS sprites？
sprites就是雪碧图，然后雪碧图是把小图片合并成为一张图片然后给他们位置控制他们，其目的是为了通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度，
2.什么是浮动？有哪些清除浮动的方法？
浮动通过float来实现，然后可以通过添加left，right，来进行浮动。
可以使用overflow属性来清除浮动，例如我们给浮动盒子的父元素加overflow:hidden;，,就是清除这个父元素中的子元素浮动对页面的影响.
然后还可以使用clear:both;他的意思是说左右不准出现浮动元素。
3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。
R：红色值。正整数 | 百分数
G ：绿色值。正整数 | 百分数
B ：蓝色值。正整数| 百分数
A ：透明度。取值0~1之间
然后opacity 属性设置元素的不透明级别。
visibility属性用来设置一个给定的元素是否显示，假如用visidility隐藏了，但元素还占有原来的位置。
display如果加none的话就直接消失不再显示。
4.描述下z-index和叠加上下文是如何形成的？
形成的条件
根元素 (HTML)
2.绝对（absolute）定位或相对（relative）定位且 z-index 值不为"auto"
3.一个 flex 项目(flex item)，且 z-index 值不为 "auto"，也就是父元素 display: flex|inline-flex
4.元素的opacity
属性值小于 1（参考 the specification for opacity）
5.元素的 transform 属性值不为 "none"
6.元素的 mix-blend-mode 属性值不为 "normal"
7.元素的 isolation 属性被设置为 "isolate"
8.在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed
总是创建一个新的层叠上下文, 即使 z-index 的值是 "auto" （参考 这篇文章）
9.元素的 -webkit-overflow-scrolling
属性被设置 "touch"
返回列表
评论