HTML5视频放完自动跳转,炫酷html5 网站视频自动跳转代码，零基础秒学

大家好

这里是有新媒之声给大家带来的html5教程

话不多说直接看效果图

首先我们先创建一个html

我们再建一个存放视频背景的文件夹video

我们给建好的html写入基本代码

然后我们再把作为背景网站的视频拷贝到video这个文件夹下

我们在给刚刚建好的html写入视频代码

效果如下

并未网页全屏，而且视频重复播放

别急现在我们给视频添加样式，使它成为名副其实的视频背景

我们给视频代码写一个class="index-video"

我们在head头写上css样式

我们现在再来看看效果

现在网页视频是以全屏播放并且你可以在上面写上其它的效果，比如说导航栏之类的，因为现在视频已经成为了我们网页的背景。

现在我们在head加上跳转代码

现在就让我们回顾一下需要用到那些代码和注意的要去

body体里

css样式

.index-video

跳转代码

//网站编码utf-8为通用的国际代码

//

炫酷跳转演示站//为网页标题

position 属性规定元素的定位类型。

position语法：

position : static absolute relative

position参数：

static : 　无特殊定位，对象遵循HTML定位规则

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

position说明：

设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

min-width: 最小宽度; min-height: 最小高度;

width: auto;//宽度为自动

height: auto;//高度为自动

z-index: -100;

//当你定义的CSS中有position属性值为absolute、relative或fixed，

用z-index此取值方可生效。

此属性参数值越大，则被层叠在最上面。

完整代码