本章节我们将学习如何使用 CSS 创建导航栏图标。
图标资源用的是 Font Awesome4.7 版本的图标。
Font Awesome 图标教程可以参考：Font Awesome 图标
可以直接引入第三方 CDN 库：
基础 HTML 代码
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>
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>
水平方向导航栏
实例
.icon-bar {
width: 100%; /* 宽度全屏 */
background-color: #555; /* 设置背景 */
overflow: auto; /* 溢出根据浮动来调整 */
} .icon-bar a {
float: left; /* 水平方向上一个挨一个显示元素 */
text-align: center; /* 文本居中 */
width: 20%; /* 等宽显示 (5 个按钮，每个显示 20%，20% * 5 = 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; /* 添加选中元素的背景颜色 */
}
width: 100%; /* 宽度全屏 */
background-color: #555; /* 设置背景 */
overflow: auto; /* 溢出根据浮动来调整 */
} .icon-bar a {
float: left; /* 水平方向上一个挨一个显示元素 */
text-align: center; /* 文本居中 */
width: 20%; /* 等宽显示 (5 个按钮，每个显示 20%，20% * 5 = 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; /* 添加选中元素的背景颜色 */
}
垂直方向导航栏
实例
.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; /* 添加选中元素的背景颜色 */
}
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; /* 添加选中元素的背景颜色 */
}
相关文章
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)