在網頁開發中,我們經常需要使用播放器來播放視頻和音頻。為了讓播放器更加美觀和符合網頁設計的風格,我們需要對播放器進行樣式調用,而CSS樣式表就是制作樣式的基礎。
.player{
width: 480px;
height: 360px;
background-color: #333;
color: #fff;
font-size: 16px;
}
.player .controls{
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px;
padding: 10px;
background-color: #000;
}
.player .controls button{
background-color: #fff;
color: #000;
border: none;
border-radius: 5px;
padding: 5px 10px;
}
.player .controls button:hover{
background-color: #555;
color: #fff;
}
在上面的代碼中,我們定義了一個名為player的CSS類,它包含了播放器的寬度、高度、背景顏色等樣式。內部還有一個名為controls的CSS類,用于設置播放器的控制按鈕樣式,包括按鈕的背景色、字體顏色等等。
這樣,我們就可以通過在HTML頁面中調用CSS類來對播放器進行樣式調用:
<div class="player">
<video src="video.mp4"></video>
<div class="controls">
<button>播放</button>
<button>暫停</button>
<button>停止</button>
</div>
</div>
通過以上代碼,我們可以在HTML頁面中嵌入一個視頻播放器,并且調用了我們在CSS中設置的樣式,使播放器看起來更為美觀和符合網頁設計的風格。
上一篇改了css樣式顯示不變
下一篇css跟js沖突