HTML5視頻背景：視頻在網頁中運用的新形式

在好多網站背景都是視頻背景，

今天我給大家講解的就是如何將視頻作為網站背景

效果圖

首先我們先寫一個index.html

代碼如下：

<!DOCTYPE html>

<html>

<head>

/*網站編碼為utf-8*/

/*網站題目*/

</head>

<body>

</body>

</html>

現在我們來寫視頻背景代碼

<!DOCTYPE html>

<html>

<head>

.index-video {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background: url("../../image/index/bg.jpg") no-repeat; background-size:cover;}

面制作技術詳解

演示視頻在文章底部

1.頁面內容居中顯示方法

將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。

將</div>放置在</body>之上。

將全部內容包裹在這個div中，就可以實現整個頁面居中。

內容顯示寬度為瀏覽器視窗寬度的50%。

margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。

2.導航欄懸停頂端方法

把四個a標簽裝到一個div中。

將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。

將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。

position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。

默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。

3.鼠標滑過導航標題或鏈接時改變背景色提示

這就要介紹關于css的寫法了。

簡單來說，就是在<head></head>標簽中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

學過HTML頁面中head標簽有啥用？——零基礎自學網頁制作的小伙伴應該知道，CSS腳本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>標簽。

hover指的是：當鼠標懸停在a上面時的狀態。

使用：連接。

這個狀態下要執行的內容在{}中。

background-color:#ffff00;即背景色為黃色。

3.隱藏滾動條方法

首先，我們要明確一點，就是，滾動條是在內容長度超過視窗高度時產生的。

如果要取消視窗最右側滾動條，就要控制內容高度。

把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。

在<p>標簽色上面添加<div>。

在</map>標簽下面添加</div>。

下面，為div規定尺寸，添加style="width:610px; height:530px;"。

這樣，就不會超出視窗。但是代碼寫完后發現并不是，如圖：

多出的文字內容超出div范圍，右側滾動條依然存在。

這就要在div的style中再增加一條語句"overflow-y:scroll;"

這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內容超出div的邊框。

如圖：

因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。

添加“overflow-x：hidden”即可，hidden（隱藏）。

如圖：hidden之后，將無法滾動或拖動畫面。

最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。

從前面的例子可知，hidden是不行的，有沒有別的辦法？

那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：

這個div這樣寫即可

</div>

同時還要給里面的div添加margin來讓它們對齊

</div>

完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音樂</title>

    <meta charset="utf-8">

<!--embed標簽寫在<head>里面的title標簽下-->
   

<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 說明：

1、src：文件路徑。

2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。

3、autostart="true" 表示是打開網頁加載完后自動播放。

4、loop="true"表示 循環播放 如僅想播放一次則為：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白氣球.mp3">       

</audio>

<!-- 說明：

1、autoplay="autoplay"，則背景音樂將在音網頁打開后就自動馬上播放。

2、controls="controls"，則為了在頁面內顯示顯示控件，如播放按鈕。

3、"loop="loop"，則是為了使背景音樂重復播放。

4、preload="auto"，則音頻在頁面加載的同時進行加載，并預備播放。

5、src=""，即是在""內加入背景音樂的保存路徑，如：src=""。

注：若是想播放按鈕隱藏，則使用以下語句：

直接使用css 的display控制audio標簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在線咨詢

上一篇：前端開發-JavaScript中的事件（Event）
下一篇：裸 VSCode 必備插件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5視頻背景：視頻在網頁中運用的新形式

面制作技術詳解

您的項目需求