大家好

這里是有新媒之聲給大家?guī)?lái)的html5教程

話不多說(shuō)直接看效果圖

首先我們先創(chuàng)建一個(gè)html

我們?cè)俳ㄒ粋€(gè)存放視頻背景的文件夾video

我們給建好的html寫入基本代碼

然后我們?cè)侔炎鳛楸尘熬W(wǎng)站的視頻拷貝到video這個(gè)文件夾下

我們?cè)诮o剛剛建好的html寫入視頻代碼

效果如下

并未網(wǎng)頁(yè)全屏，而且視頻重復(fù)播放

別急現(xiàn)在我們給視頻添加樣式，使它成為名副其實(shí)的視頻背景

我們給視頻代碼寫一個(gè)class="index-video"

我們?cè)趆ead頭寫上css樣式

我們現(xiàn)在再來(lái)看看效果

現(xiàn)在網(wǎng)頁(yè)視頻是以全屏播放并且你可以在上面寫上其它的效果，比如說(shuō)導(dǎo)航欄之類的，因?yàn)楝F(xiàn)在視頻已經(jīng)成為了我們網(wǎng)頁(yè)的背景。

現(xiàn)在我們?cè)趆ead加上跳轉(zhuǎn)代碼

現(xiàn)在就讓我們回顧一下需要用到那些代碼和注意的要去

body體里

css樣式

.index-video

跳轉(zhuǎn)代碼

//網(wǎng)站編碼utf-8為通用的國(guó)際代碼

//

炫酷跳轉(zhuǎn)演示站//為網(wǎng)頁(yè)標(biāo)題

position 屬性規(guī)定元素的定位類型。

position語(yǔ)法：

position : static absolute relative

position參數(shù)：

static : 　無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則

absolute : 　將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)css z-index屬性定義。此時(shí)對(duì)象不具有邊距，但仍有補(bǔ)白和邊框

relative : 　對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置

position說(shuō)明：

設(shè)置對(duì)象的定位方式，可以讓布局層容易位置絕對(duì)定位，控制盒子對(duì)象更加準(zhǔn)確。

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

width: auto;//寬度為自動(dòng)

height: auto;//高度為自動(dòng)

z-index: -100;

//當(dāng)你定義的CSS中有position屬性值為absolute、relative或fixed，

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

此屬性參數(shù)值越大，則被層疊在最上面。

完整代碼

總結(jié)

以上是生活随笔為你收集整理的HTML5视频放完自动跳转,炫酷html5 网站视频自动跳转代码，零基础秒学的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。