发表于: 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"
评论