html5，css3 学习心得

8月1日至8月10日

学习HTML5，CSS3

下面总结一下。

 

html5：

HTML5主要新增了一些如下的新特性

1.用于绘画的canvas元素

主要通过JavaScript来绘制图形

基本实现步骤如下：

 

<canvas id="canvas" width="200" height="100">
你的浏览器不支持canvas标签
</canvas>

var c=document.getElementById("canvas");
var cxt=c.getContext("2d");

取得2d绘图上下文，下面可以通过js方法绘制所需要的图形

 

大多数的2d上下文操作结果取决于两个属性：fillStyle填充颜色、strokeStyle描边颜色

基本绘制图形的方法：

rect（x,y,width,height）绘制矩形

arc（x,y,radius,startAngle,endAngle,counterclockwise）绘制弧线

lineTo（x,y）从上一点开始绘制一条直线，到点（x,y）

moveTo(x,y) 游标移动到（x,y）

调用fill（）、stroke（）对绘制路径进行填充或描边。

 

2.用于媒体播放的video 和audio元素

方法有play（）、pause()、load（）

 

3.对本地离线存储的更好的支持

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

 

4.新增了一些语义元素，如：header、footer、nav、section、article等

5.新的表单控件，如 time、date、email、url、search、calendar

 

CSS3新增特性如下：

背景：

background-size
background-origin

边框：

border-radius
box-shadow
border-image

文本效果：

text-shadow
word-wrap

2D/3D 转换：

transform

2D

translate()
rotate()
scale()
skew()
matrix()

3D

rotateX()
rotateY()

过渡：

transition

动画：

@keyframes 规则

多列布局：

”column-count
column-gap
column-rule

用户界面：

resize
box-sizing
outline-offset
 

 

通过学习css3受益颇深，很多以前看起来不懂得代码，都豁然开朗。不管是字体规则还是动画规则，css3新增了很多美腻的属性呐。

下面是一个小小的demo。用于手机浏览。电脑暂时不能正确浏览。

设计用了一天：收集图片，ps，调整大小，用ppt制成小样

整体框架实现用了一天：按照制成的小样把整个东西实现出来

动画效果，调试，解决bug用了一天：添加动画效果，背景音乐。

主要用到的，是这次学习到的html5，css3的音频，动画规则，字体规则。

1.audio标签引入背景音乐，添加autoplay属性自动播放。

2.音乐图标旋转效果:

定义旋转动画

 

@keyframes rotateMusic{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}

定义旋转类元素

 

 

.rotateMusicIcon{
	-webkit-animation:rotateMusic 3.5s;
	-o-animation:rotateMusic 3.5s;
	-moz-animation:rotateMusic 3.5s;
	animation:rotateMusic 3.5s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}

为每个音乐图标添加类rotateMusicIcon，即可实现旋转效果。

 

js判断，当图标被点击时，背景音乐是播放状态还是暂停状态

播放状态，则暂停播放，myAudio.pause();

此时移除rotateMusicIcon，图标不再旋转。$(".music").removeClass('rotateMusicIcon');

暂停状态，则播放，myAudio.play();

此时添加rotateMusicIcon，图标选择，$(".music").addClass('rotateMusicIcon');

3.整屏滚动效果用到了插件fullpage,这也是我经常用的插件。

4.下面再特别地谈到一个bug。只是一个十分微小的错误，但是却折腾了我一天。记录下来，希望以后不要再犯这种愚蠢的错误。

正如三提到的音乐图标有点击事件，写完点击事件，却发现事件不生效。

不断地检查，也没发现点击事件哪里出错了。改了类名调试，意外地发现怎么改了类名就可以？

最后通过chrome的调试查看，查看元素，发现音乐图标与logo图标重合。查看代码，发现logo的  z-index：999

也就是说图标位于logo下面，自然点击不到。点击事件是存在的，只是图标没有办法被点击到。

改了 图标的 z-index ，让音乐图标位于logo什么，一切正常。

由于logo与图标重合部分，logo是透明的，所以导致没有发现音乐图标被logo覆盖，正是这个小小的错误。还以为自己遇到了什么未解之谜。怎么那么奇特。

再次警戒自己，要细心。

 

http://119.29.93.216:8080/earlRecruit/index.html

 

 

下面再谈一下git，服务器

这是这几天接触到的东西，让人十分尴尬，不会用，看到的各种教程也是让人一脸懵逼，很谢谢我的队友，给予我的各种帮助。不仅帮助我，成功搭建了我自己的服务器，还教会我如何使用git，队友万岁。

当然这只是入门级别，他们丢给我很多教程。看来我要慢慢消化了，光是折腾服务器的，我就一脸懵逼。两三天没配置好。不知道去哪里买，问他们，不知道买哪个，问他们，不知道什么配置好，问他们，不能登录，问他们，不会配置，问他们。真的很谢谢我的队友，给了我这么多耐心，帮助我这个小白。

 

 

暑假还剩下20天，说实在的，现在还只是学到皮毛。最近因为git，服务器等等，深受打击，让我很头疼很懊恼。一直在麻烦队友，也让我倍感惭愧。

好好鞭笞自己，接下来的时间好好学习js等。