数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何用 CSS 创建图标栏。
想要使用 CSS 创建图标栏，你需要设置图标。在这里，我们将考虑 Font Awesome 图标。要包含此类图标，请在 <link> 下为图标设置 CDN。我们将创建一个水平图标栏和一个垂直栏。
为图标设置 CDN
为了在我们的网页上添加图标，我们使用了 Font Awesome 图标。使用 <link> 元素在网页上包含它 −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
水平图标栏
要创建水平图标栏，将宽度设置为 100% 并将溢出属性设置为 auto −
.icon-bar {
width: 100%;
background-color: black;
overflow: auto;
}
示例
让我们看一个创建水平图标栏的示例 −
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
width: 100%;
background-color: black;
overflow: auto;
}
.icon-bar a {
float: left;
width: 30%;
text-align: center;
color: white;
font-size: 30px;
}
.active {
background-color: blue;
}
</style>
<body>
<div class="icon-bar">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a class="active" href="#"><i class="fa fa-bars"></i></a>
</div>
</body>
</html>
垂直图标栏
要创建垂直图标栏，将宽度设置为 50% −
.icon-bar {
width: 50px;
background-color: black;
}
对于 <a>，即为了正确地将图标放置在图标栏中，将 display 属性设置为块值 −
.icon-bar a {
display: block;
text-align: center;
color: white;
font-size: 30px;
}
示例
让我们看一个创建垂直图标栏的示例 −
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
width: 50px;
background-color: black;
}
.icon-bar a {
display: block;
text-align: center;
color: white;
font-size: 30px;
}
.active {
background-color: blue;
}
</style>
<body>
<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-bars"></i></a>
</div>
</body>
</html>
更新于： 2023-12-14
1K+ 浏览
广告