片
當我們在制作頁面的時候,通常會遇到圖片的三種表現形式,如下:
1、內容圖片
內容圖片是頁面中真正的內容,沒有內容圖片,就無法完整的理解頁面內容。如淘寶網上的商品展示圖片,這些圖片是網頁的一部分,它們能幫助你決定這個頁面的內容是否是你需要的。
內容圖片
2、布局圖片
布局圖片出現在頁面背景中,要想理解頁面的內容,它們不是必須的。如蘋果官網的這個圖片,沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助,如搜索圖片,一看到就知道這里可以搜索想要的東西,購物車圖片可以看到選購的產品,箭頭圖片點擊可以看到更詳細的產品等。
交互圖片
在HTML中我們用 img 標簽創建圖片,英文是image的縮寫。
<img src="" alt="">
內容圖片
布局圖片是在CSS中被創建出來的,使用CSS中的background屬性,如:
1)background-color 定義背景顏色,設置背景圖片時,要始終設置背景顏色,確保背景圖片沒有成功時會顯示一個背景顏色
2)background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3)background-repeat可以設置背景是否平鋪在容器中,包含四個關鍵字:
4)background-position 屬性可以控制背景圖片顯示在什么位置,包含兩個關鍵字,如:
background-position:top left 設置圖片顯示在容器的左上角,第一個關鍵字可以是top、center、bottom,第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中,如:
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color,image,position,repeat,CSS屬性能用簡寫就盡量用簡寫,簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1)Jpeg 可以展示一張照片或者復雜圖像
2)png最適合展示網頁插畫、logo和網頁小圖標
3)gif適合展示網頁插畫、logo和網頁小圖標
建議:
一般情況下用戶交互圖片都是一些小圖標,所以使用png或gif作為用戶交互圖片;使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片;推薦把用戶交互圖片放在同一個文件中,可以提高網絡和服務器性能,如:
交互圖片
交互圖片
具體如何操作呢?后續教頭會通過視頻給大家詳細演示,請繼續關注。
作用是向網頁中添加圖片,并且img標簽有多個可用參數可以添加。
<!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>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。