資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何用 CSS 設定標籤樣式？
網頁上的標籤可以用作以顏色形式的危險、警告、資訊符號。使用 Bootstrap，可獲得預定義的類。然而，即使沒有 Bootstrap，CSS 樣式也能幫助我們實現相同的效果。
標籤
<span> 元素用於為資訊、成功、警告和危險設定不同的標籤。以下是我們使用 CSS 設定每個標籤的不同類 −
<span class="success">Success</span> <span class="info">Info</span> <span class="warning">Warning</span> <span class="danger">Danger</span> <span class="other">Other</span>
設定按鈕樣式
標籤以這種方式設定樣式 −
span {
font-size: 18px;
font-weight: 600;
color: white;
padding: 8px;
}
成功標籤
使用 background-color 屬性設定具有不同背景顏色的成功標籤 −
.success {
background-color: #4caf50;
}
資訊標籤
使用 background-color 屬性設定具有不同背景顏色的資訊標籤 −
.info {
background-color: #2196f3;
}
危險標籤
使用 background-color 屬性設定具有不同背景顏色的危險標籤 −
.danger {
background-color: #f44336;
}
警告標籤
使用 background-color 屬性設定具有不同背景顏色的警告標籤 −
.warning {
background-color: #ff9800;
}
示例
使用 CSS 設定標籤樣式，如下所示 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
span {
font-size: 18px;
font-weight: 600;
color: white;
padding: 8px;
}
.success {
background-color: #4caf50;
}
.info {
background-color: #2196f3;
}
.warning {
background-color: #ff9800;
}
.danger {
background-color: #f44336;
}
.other {
background-color: #e7e7e7;
color: black;
}
</style>
</head>
<body>
<h1>Labels Example</h1>
<span class="success">Success</span>
<span class="info">Info</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Other</span>
</body>
</html>
更新於： 21-12-2023
2K+ 檢視
廣告