CSS 按鈕

為大家介紹使用 CSS 來制作按鈕。

基本按鈕樣式

默認按鈕 CSS 按鈕

CSS 實例

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

}

按鈕顏色

GreenBlueRedGrayBlack

我們可以使用 background-color 屬性來設置按鈕顏色:

CSS 實例

.button1 {background-color: #4CAF50;} /* Green */

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

嘗試一下 ?

按鈕大小

10px12px16px20px24px

我們可以使用 font-size 屬性來設置按鈕大小:

CSS 實例

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

圓角按鈕

2px4px8px12px50%

我們可以使用 border-radius 屬性來設置圓角按鈕:

CSS 實例

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

嘗試一下 ?

按鈕邊框顏色

綠藍紅灰黑

我們可以使用 border 屬性設置按鈕邊框顏色:

CSS 實例

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50; /* Green */

}

...

嘗試一下 ?

鼠標懸停按鈕

綠藍紅灰黑

我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。

提示: 我們可以使用 transition-duration 屬性來設置 "hover" 效果的速度:

CSS 實例

.button {

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

}

.button:hover {

background-color: #4CAF50; /* Green */

color: white;

}

...

按鈕陰影

陰影按鈕鼠標懸停后顯示陰影

我們可以使用 box-shadow 屬性來為按鈕添加陰影:

CSS 實例

.button1 {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

嘗試一下 ?

禁用按鈕

正常按鈕禁用按鈕

我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。

提示: 我么可以添加 cursor 屬性并設置為 "not-allowed" 來設置一個禁用的圖片:

CSS 實例

.disabled {

opacity: 0.6;

cursor: not-allowed;

}

嘗試一下 ?

按鈕寬度

250px

50%100%

默認情況下，按鈕的大小有按鈕上的文本內容決定( 根據文本內容匹配長度 )。我們可以使用 width 屬性來設置按鈕的寬度:

提示: 如果要設置固定寬度可以使用像素 (px) 為單位，如果要設置響應式的按鈕可以設置為百分比。

CSS 實例

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

嘗試一下 ?

按鈕組

ButtonButtonButtonButton

移除外邊距并添加 float:left 來設置按鈕組:

CSS 實例

.button {

float: left;

}

嘗試一下 ?

帶邊框按鈕組

ButtonButtonButtonButton

我們可以使用 border 屬性來設置帶邊框的按鈕組:

CSS 實例

.button {

float: left;

border: 1px solid green

}

嘗試一下 ?

按鈕動畫

CSS 實例

鼠標移動到按鈕上后添加箭頭標記:

Hover

嘗試一下 ?

CSS 實例

點擊時添加 "波紋" 效果:

Click

CSS 實例

點擊時添加 "壓下" 效果:

Click

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

近，我們在教學生使用JavaScript，今天就帶大家開發(fā)一款簡單的音樂播放器。首先，最終效果如圖所示：

首先，我們來編寫html界面index.html，代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

接下來，編寫style.css，代碼如下：

body{

margin: 0px;

background-color: #ccc;

}

#boxDiv{

width: 375px;

height: 568px;

margin: 10px auto;

position: relative;

}

#contentDiv{

width: 375px;

height: 460px;

overflow: hidden;

}

#lrcDiv{

margin-top: 260px;

}

#lrcDiv span{

display: block;

line-height: 40px;

text-align: center;

color: white;

font-size: 20px;

}

#bgTopSpan{

position: absolute;

display: block;

width: 375px;

height: 30px;

top: 0px;

}

#bgBottomSpan{

top: 430px;

position: absolute;

display: block;

width: 375px;

height: 30px;

}

#controlDiv{

width: 375px;

height: 180px;

position: relative;

background-color: white;

}

#progressDiv{

background-color: red;

height: 1.5px;

width: 0px;

}

#pointerImg{

width: 18px;

height: 18px;

position: absolute;

top: -8.5px;

left: -3px;

}

#playTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 5px;

}

#totalTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 335px;

}

#titleSpan{

display: block;

position: absolute;

height: 30px;

width: 295px;

font-size: 20px;

text-align: center;

left: 40px;

top: 5px;

}

#buttonDiv{

margin-top: 40px;

position: relative;

}

#prevImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 60px;

}

#playOrPauseImg{

width: 70px;

height: 70px;

position: absolute;

top: 5px;

left: 152px;

}

#nextImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 275px;

}

最后，編寫common.js，代碼如下：

$(function(){

// 歌曲列表

var playList = ["紅日", "狼的誘惑", "漂洋過海來看你"];

// 當前播放的歌曲序號

var currentIndex = 0;

// 播放器的原生對象

var audio = $("#song")[0];

// 播放時間數組

var timeArr = [];

// 歌詞數組

var lrcArr = [];

// 調用播放前設置

setup();

// 播放歌曲

playMusic();

// 播放歌曲

function playMusic(){

// 播放歌曲

audio.play();

// 設置為暫停的圖片

$("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");

}

// 歌曲播放前設置

function setup(){

// 設置播放哪一首歌曲

// img/audio/紅日.mp3

audio.src = "img/audio/" + playList[currentIndex] + ".mp3";

// 設置歌曲的名字

$("#titleSpan").text(playList[currentIndex]);

// 設置歌詞

setLrc();

}

// 設置歌詞

function setLrc(){

// 清空上一首的歌詞

$("#lrcDiv span").remove();

// 清空數組

timeArr = [];

lrcArr = [];

// 加載歌詞文件

$.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){

if(data){

// 按行切割字符串

var arr = data.split("\n");

// 分割歌詞

for (var i = 0; i < arr.length; i++) {

// 分割時間和歌詞

var tempArr = arr[i].split("]");

if (tempArr.length > 1){

// 添加時間和歌詞到數組

timeArr.push(tempArr[0]);

lrcArr.push(tempArr[1]);

}

// 顯示歌詞

for (var i = 0; i < lrcArr.length; i++) {

$("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");

}

});

}

// 播放暫停事件

$("#playOrPauseImg").click(function(){

// 如果播放器是暫停狀態(tài)

if(audio.paused){

// 繼續(xù)播放

playMusic();

}else{

// 暫停

audio.pause();

// 變成播放的圖片

$("#playOrPauseImg").attr("src", "img/audio/play@2x.png");

}

});

// 上一首

$("#prevImg").click(function(){

// 如果是第一首，那么跳到最后一首

if(currentIndex == 0){

currentIndex = playList.length - 1;

}else{

currentIndex--;

}

// 播放前設置

setup();

// 播放

playMusic();

});

// 下一首

$("#nextImg").click(function(){

// 如果是最后一首，就跳到第一首

if(currentIndex == playList.length - 1){

currentIndex = 0;

}else{

currentIndex++;

}

// 播放前設置

setup();

// 播放

playMusic();

});

// 監(jiān)聽播放器播放時間改變事件

audio.addEventListener("timeupdate", function(){

// 當前播放時間

var currentTime = audio.currentTime;

// 總時間

var totalTime = audio.duration;

// 當是數字的時候

if(!isNaN(totalTime)){

// 得到播放時間與總時長的比值

var rate = currentTime / totalTime;

// 設置時間顯示

// 播放時間

$("#playTimeSpan").text(getFormatterDate(currentTime));

// 總時長

$("#totalTimeSpan").text(getFormatterDate(totalTime));

// 設置進度條

$("#progressDiv").css("width", rate * 375 + "px");

// 設置進度圓點

$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");

// 設置歌詞的顏色和內容的滾動

for (var i = 0; i < timeArr.length - 1; i++) {

if(!isNaN(getTime(timeArr[i]))){

// 當前播放時間大于等于i行的時間，并且小于下一行的時間

if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){

// 當前行歌詞變紅色

$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");

// 其他行歌詞變白色

$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");

// 當前行歌詞滾動

$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);

}

});

function getTime(timeStr){

// 去掉左邊的[

var arr = timeStr.split("[");

if(arr.length > 1){

// 得到右邊的時間

var str = arr[1];

// 分割分、秒

var tempArr = str.split(":");

// 分

var m = parseInt(tempArr[0]);

// 秒

var s = parseFloat(tempArr[1]);

return m * 60 + s;

}

return 0;

}

// 格式化時間（00：00）

function getFormatterDate(time){

// 分

var m = parseInt(time / 60);

// 秒

var s = parseInt(time % 60);

// 補零

m = m > 9 ? m : "0" + m;

s = s > 9 ? s : "0" + s;

return m + ":" + s;

}

});

圖片和歌曲、歌詞請自行下載，最后，可以運行試試了。是不是很有趣呢？想要學習更多的Java技術開發(fā)知識，關注“重慶千鋒”獲取更多的視頻教程，千鋒重慶IT培訓機構還提供兩周免費試聽課程，歡迎各位小伙伴申請試聽。

音在HTML中可以以不同的方式播放.

問題以及解決方法

在 HTML 中播放音頻并不容易！

您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

在這W3CSchool 為您總結了問題和解決方法。

使用插件

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件可以使用 <object> 標簽或者 <embed> 標簽添加在頁面上.

這些標簽定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。

使用 <embed> 元素

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

問題:

<embed> 標簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 <object> 元素

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

問題:

不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

The <audio> element works in all modern browsers.

以下我們將使用 <audio> 標簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會顯示一個錯誤文本信息:

實例

Your browser does not support this audio format.

</audio>

問題:

<audio> 標簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。
您必須把音頻文件轉換為不同的格式。
<audio> 元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

實例

</audio>

問題:

您必須把音頻轉換為不同的格式。
<embed> 元素無法回退來顯示錯誤消息。

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用雅虎播放器是免費的。如需使用它，您需要把這段 JavaScript 插入網頁底部：

雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或博客中就可以輕松地將您的HTML頁面制作成專業(yè)的播放列表：

實例

<a href="horse.mp3">Play Sound</a>

如果你要使用它，您需要把這段 JavaScript 插入網頁底部：

然后只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會自動地為每首歌創(chuàng)建播放按鈕：

...

雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。

使用超鏈接

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"輔助應用程序"來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動"輔助應用程序"來播放該文件：

實例

<a href="horse.mp3">Play the sound</a>

內聯(lián)的聲音說明

當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為內聯(lián)聲音。

如果您打算在 web 應用程序中使用內聯(lián)聲音，您需要意識到很多人都覺得內聯(lián)聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯(lián)聲音選項。

我們最好的建議是只在用戶希望聽到內聯(lián)聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音并點擊某個鏈接時，會打開頁面然后播放錄音。

HTML 多媒體標簽

New : HTML5 新標簽

標簽	描述
<embed>	定義內嵌對象。HTML4 中不贊成，HTML5 中允許。
<object>	定義內嵌對象。
<param>	定義對象的參數。
<audio>New	定義了聲音內容
<video>New	定義一個視頻或者影片
<source>New	定義了media元素的多媒體資源(<video> 和 <audio>)
<track>New	規(guī)定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：前端入門-浮動float
下一篇：jQuery UI 實例-對話框（Dialog）

您的項目需求

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

整合營銷服務商

CSS 按鈕

您的項目需求