发表于： 2017-04-16 00:20:10
1 586
今天白天出去面试，晚会回来又去跑步到10点，回来洗完澡就差不多11点了，然后学习了1个小时左右，把任务7将要用到的几个小知识点学了下。
-----------------------------------------分界线--------------------------------------
今天完成的事情：
1.下载了任务7的资源，并把需要用到的图标进行了切图。
2.学习了HTML5的几种添加音频的办法：
a.使用<embed>标签（它是定义一个非html的外部容器）。代码：<embed width="50px" height="50px" src="audio.mp3"/>
b.使用<object>标签（同样的也是一个非html的外部容器）。代码：<object width="50px" height="50px" src="audio.mp3"></object>
c.使用<audio>元素，它是一个html5元素。代码：
<audio controls="controls">
<source src="song.mp3" type="audio/mp3"/>
你将会听到一段音乐。
</audio>
其中这个controls的意思是控制。
由于<embed>和<audio>都无法通过HTML4和XHTML，因此必须要在前面加上<!DOCTYPE html>。
d.使用雅虎的媒体播放器
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
将上面的那段代码插入网页底部，然后直接在文档里写入<a href="audio.mp3">点击播放音乐</a>就可以了。
3.学习了用css如何设置半透明的图片
> 如果只是为了设置颜色半透明，在html5中有直接设置透明度的方法：
background-color: rgba(0,150,50,0.7); 这最后一个数值就是设置透明度的数值,其中完全透明直接写transparent就可以了。
> 第二种方法是使用半透明的粒子图片或者半透明的png图片。
background: url(path/background.png) no-repeat center center scroll;
> 考虑到不同浏览器的兼容性问题，推荐以下方法：
body {
background-color: rgba(0,150,50);
opacity: 0.7;
filter: alpha(opacity=70);
}
OR
body {
background: url(path/background.png);
opacity: 0.7;
filter: alpha(opacity=70);
}
要注意的是，这里的opacity和alpha强调的是不透明度，也就是说数值越大，越不透明。
明天计划的事情：
1.开始动手写任务7的html结构；
2.继续学习bootstrap剩下的内容。
遇到的问题：
今天暂时没有。
收获：
1.学会了如何往html中添加音频；
2.学会了如何设置半透明的背景及半透明的图片。
返回列表
评论