html底部导航栏代码css
时间: 2023-07-28 18:07:01 浏览: 83
下面是一个简单的 HTML 底部导航栏代码的 CSS 样式示例:
```css
footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #666;
text-decoration: none;
font-size: 16px;
padding: 5px;
}
nav a:hover {
color: #333;
background-color: #f2f2f2;
border-radius: 5px;
}
```
这些 CSS 样式将底部导航栏的背景设置为淡灰色,并在底部添加一些内边距。`nav ul` 使用了 `flex` 布局,将导航栏中的列表项水平居中。`nav li` 为列表项添加了一些水平间距。`nav a` 设置链接的样式,包括颜色、字体大小和内边距。`nav a:hover` 在鼠标悬停在链接上时,将链接的颜色设置为深灰色,并添加一些背景色和圆角的效果。
相关问题
用HTML写一个底部导航栏的代码
好的,以下是一个基本的HTML底部导航栏的代码:
```html
<footer>
<nav class="navbar">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</nav>
</footer>
```
你可以根据需求自定义css样式来美化导航栏。
用html制作应用底部导航栏
可以使用HTML和CSS制作一个简单的底部导航栏。首先,创建一个无序列表元素,并将其样式设置为display: flex;和justify-content: space-evenly;以实现导航栏的水平对齐。然后,在列表项中添加链接和相应的图标。最后,应用CSS样式来调整导航栏的外观和布局。以下是示例代码:
```html
<footer>
<ul class="nav">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-search"></i> Search</a></li>
<li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
</ul>
</footer>
<style>
footer {
background-color: #f2f2f2;
padding: 16px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.nav {
list-style: none;
display: flex;
justify-content: space-evenly;
margin: 0;
padding: 0;
}
.nav li a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #888;
font-size: 14px;
text-decoration: none;
}
.nav li a:hover {
color: #333;
}
.nav li a i {
font-size: 24px;
margin-bottom: 5px;
}
</style>
```
相关推荐
![](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)