图标导航栏怎么编写,用html语言
时间: 2024-05-06 16:14:55 浏览: 11
一个基本的图标导航栏可以使用HTML和CSS编写。下面是一个简单的例子:
HTML代码:
```
<nav>
<ul>
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-user"></i></a></li>
</ul>
</nav>
```
在这个例子中,我们使用了一个`<nav>`标签来定义导航栏,然后使用一个`<ul>`标签和四个`<li>`标签来定义导航栏中的四个图标按钮。每个按钮都是一个`<a>`标签,其中包含一个`<i>`标签和一个FontAwesome图标类名。FontAwesome是一个流行的图标库,可以在网站上免费使用。
CSS代码:
```
nav {
background-color: #f2f2f2;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
color: black;
}
.fa {
font-size: 20px;
margin-right: 5px;
}
```
在这个例子中,我们使用CSS来定义导航栏的样式。我们设置了一个背景颜色,清除了列表的默认样式,并使列表项浮动到左侧。我们还设置了按钮的样式,包括颜色、文本对齐、内边距和文本装饰。最后,我们定义了FontAwesome图标的样式,包括字体大小和右边距。
这只是一个基本的例子,你可以根据自己的需要进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)