收藏

下载资源 加入VIP,免费下载

第1页 / 共94页

第2页 / 共94页

第3页 / 共94页

第4页 / 共94页

第5页 / 共94页

（2）position属性

有三个值：

static:

缺省值。

浏览器会将标记按默认的方式摆放（左－右，上－下）。

absolute:

相对父标记（所在的标记）偏移。

relative:

先按照默认的方式摆放，然后再偏移。

常用属性如下：

（1）文本相关的属性

font-size:

30px;//字体大小

font-style:

normal（正常）/italic（斜体）

font-weight:

800;//100－900（粗细）

font-family:

"宋体";//字体

text-align:

left/center/right;//文本水平对齐方式

line-height:

30px;//行高一般和容器的高值相同放在中间

cursor:

pointer/wait;//光标的形状

（2）背景相关的属性

background-color:

red;//背景颜色

background-color:

#88eeff;//RGB格式颜色设置

background-color:

rgb（100,100,100）;//可以用这种格式输入十进制数的颜色值

background-image:

url（images/t1.jpg）;//背景图片

background-repeat:

no-repeat/repeat-x/repeat-y;//平铺方式

background-position:

30px20px;//（水平和垂直）背景位置

background-attachment:

scroll（默认）/fixed;//依附方式

也可以同时设置背景的多个特性：

background:

背景颜色背景图片平铺方式依附方式水平位置垂直位置；

（3）边框

border-left:

1pxsolidred;

border-right:

2pxdottedblack;

border-bottom:

border-top:

border:

1pxsolidred;

（4）定位

width:

100px;

height:

200px;

margin//外边距

margin-left:

20px;

margin-right:

30px;

margin-top:

40px;

margin-buttom:

50px;

可以简化为：

margin:

toprightbottomleft;

margin:

40305020;

padding//内边距

padding-left:

padding-right:

padding-top:

padding-buttom:

可以简化为：

padding:

toprightbottomleft;

内边距会将父标记撑开

（5）浮动

取消标记独占一行的特性

float:

left/right;//向左，向右浮动

clear:

both;//清除浮动的影响

（6）其他

list-style-type:

none;除掉列表选项的小圆点。

text-decoreation:

underline;//给文本加下划线

（7）连接的伪样式

a:

link{color:

red}没有访问时

a:

visited{color:

blue}鼠标放上时

a:

action{color:

green}鼠标点击时

a:

hover{color:

yellow}鼠标离开时

先看看border-color设置边框

相关属性：

border-top-color,border-right-color,border-bottom-color,border-left-color

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml">

可以从css3.0参考书册中看到css3增加了很多样式属性，我们可以参考该手册进行比css2更加绚丽的界面效果，如果配合js还可以实现页面动画制作。

下面我们再来看看给界面元素创建圆角效果

在css2中为了实现这种效果，我们需要制作两张图片。

代码如下：

上面的方法虽然解决了问题，但是增加了一个多余的标签，下面我们来看看用css3如何解决：

a{

float:

left;

height:

40px;

line-height:

40px;

padding-left:

0.8em;

padding-right:

0.8em;

border-top-left-radius:

8px;

border-top-right-radius:

8px;

background-image:

url（imagess/headerTiny.png）;

backgrount-repeat:

repeat-x;

}

BoxTitle

制作一个漂亮的视频播放器

开始真正的体验一下HTML5的优势，我们开始制作一个漂亮的视频播放器吧微笑先别急，在开始制作之前先了解一下视频文件的基本知识。

一、视频的格式

目前比较主流和使用比较的的视频格式主要有：

avi、rmvb、wmv、mpeg4、ogg、webm。

这些视频都是由视频、音频、编码格式三部分组成的。

在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：

H.264（个人不看好）：

这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。

在编码及传输过程中的任何部分都可能需要收取专利费。

因此Safari（苹果的浏览器）和IntenetExplorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。

Theora:

这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。

Chrome、Firefox以及Opera支持该编码器。

VP8：

该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。

Chrome、Firefox以及Opera支持该编码器。

AAC:

音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和InternetExplorer支持该音频编码器。

MP3：

也是一个专利技术，Safari、Chrome和InternetExplorer支持该音频编码器。

PCM:

存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。

是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和InternetExplorer支持该音频编码器。

Vorbis:

文件扩展名为.ogg，有时候也被称为OggVorbis,该音频编码器不受专利保护，因此版权免费。

支持的浏览器包括Chrome、Firefox和Opera.

二、HTML5中的属性

在html5中可以使用

video标签中有很多属性，例如controls属性可以控制是否有控制台。

浏览器不支持HTML5的视频播放功能

从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。

三、制作视频播放器

index.html

见demo

Canvas图形绘制基础

Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。

一、Canvas标签的使用

可以看到Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。

canvas元素本身是没有绘图能力的。

所有的绘制工作必须在JavaScript内部完成。

二、画矩形

三、画线条

四、画圆形

五、渐变

六、绘制图片

七、多边形

在线画板

用html5来实现一个在线的画板，玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦，效果如下图所示：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

#php100{border:

1pxsolid#ccc;}

varcanvas=document.getElementById（'php100'）;

varp100=canvas.getContext（"2d"）;

p100.lineWidth=5

p100.strokeStyle="red";

varpaint=0;

$（"#php100"）.mousedown（function（e）{

varmouseX=e.pageX-this.offsetLeft;

varmouseY=e.pageY-this.offsetTop;

paint=1;

p100.moveTo（mouseX,mouseY）;//起始位置

}）;

$（"#php100"）.mouseup（function（e）{

paint=0;

}）;

$（"#php100"）.mousemove（function（e）{

varmouseX=e.pageX-this.offsetLeft;

varmouseY=e.pageY-this.offsetTop;

if（paint）{

p100.lineTo（mouseX,mouseY）;//终止位置

p100.stroke（）;//结束图形

}

}）;

国内的JqueryCDN免费服务

Jquery是个非常流行的JS前端框架，在很多网站都能看到它的身影。

很多网站都喜欢采用一些JqueryCDN加速服务，这样网站加载jquery会更快。

之前火端网络的一些网站都是使用Google的jqueryCDN，如：

，但是由于最近Google打不开，这些CDN地址也无法访问，而JS往往放在网页的head里，JS无法访问导致网站打开非常慢，只能是全部替换掉CDN链接了。

推荐几个国内的jqueryCDN服务地址吧：

★新浪CDN，感觉很快，用的人很多，推荐使用！

1

其它版本可以在这里找地址

★XXCDN

1

其它版本之间修改代码中的版本号就行了

★360的CDN

1

其它版本也是直接修改版本号就可以了

如果担心CDN地址加载失败，可以这样载入本地jquery

查看代码

打印

?

1

2

!

window.jQuery&&document.write（'<\/script>'）;

3

事件

下面的全局属性可用于任何HTML5元素