如何 - 圖示欄
瞭解如何使用 CSS 建立圖示欄。
如何建立圖示欄
步驟 1) 新增 HTML
示例
<!-- 新增圖示庫 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
步驟 2) 新增 CSS
垂直示例
.icon-bar {
width: 90px; /* 設定特定寬度 */
background-color: #555; /* 深灰色背景 */
}
.icon-bar a {
display: block; /* 使連結看起來像上下排列而不是並排排列 */
text-align: center; /* 居中文本 */
padding: 16px; /* 新增一些內邊距 */
transition: all 0.3s ease; /* 新增過渡效果以實現懸停效果 */
color: white; /* 白色文字顏色 */
font-size: 36px; /* 增加字型大小 */
}
.icon-bar a:hover {
background-color: #000; /* 新增懸停顏色 */
}
.active {
background-color: #04AA6D; /* 新增啟用/當前顏色 */
}
自己動手試一試 »
水平示例
.icon-bar {
width: 100%; /* 全寬度 */
background-color: #555; /* 深灰色背景 */
overflow: auto; /* 由於浮動而溢位 */
}
.icon-bar a {
float: left; /* 連結浮動並排 */
text-align: center; /* 居中文本 */
width: 20%; /* 等寬（5 個圖示，每個 20% 寬度 = 100%） */
padding: 12px 0; /* 上下內邊距 */
transition: all 0.3s ease; /* 新增過渡效果以實現懸停效果 */
color: white; /* 白色文字顏色 */
font-size: 36px; /* 增加字型大小 */
}
.icon-bar a:hover {
background-color: #000; /* 新增懸停顏色 */
}
.active {
background-color: #04AA6D; /* 新增啟用/當前顏色 */
}
自己動手試一試 »
相關頁面
提示：訪問我們的 CSS 導航欄教程 瞭解更多關於導航欄的資訊。
提示：前往我們的 圖示教程 瞭解更多關於圖示的資訊。
