首页 » 网页制作 » css

CSS 导航栏图标

css 2021-12-23

本章节我们将学习如何使用 CSS 创建导航栏图标。

图标资源用的是 Font Awesome4.7 版本的图标。

Font Awesome 图标教程可以参考:Font Awesome 图标

可以直接引入第三方 CDN 库:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

基础 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>

水平方向导航栏

实例

.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; /* 添加选中元素的背景颜色 */ }

尝试一下 ?

垂直方向导航栏

实例

.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; /* 添加选中元素的背景颜色 */ }

尝试一下 ?

相关文章

CSS 导航栏

Font Awesome 图标


上一篇:float浮动的详细总结下一篇:CSS 创建搜索框
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.