用HTML 将菜鸟教程的导航栏用flex布局展示
时间: 2023-07-19 12:15:49 浏览: 51
好的,以下是使用HTML和CSS实现菜鸟教程导航栏的flex布局代码:
HTML代码:
```html
<div class="nav">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Python</a>
<a href="#">Java</a>
<a href="#">PHP</a>
<a href="#">C++</a>
<a href="#">Ruby</a>
<a href="#">Swift</a>
<a href="#">SQL</a>
</div>
```
CSS代码:
```css
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 10px;
}
.nav a {
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 16px;
padding: 10px;
border-radius: 5px;
}
.nav a:hover {
background-color: #333;
color: #fff;
}
```
在这里,我们使用了flex布局来实现导航栏的排列,并添加了一些CSS样式来美化导航栏。具体来说,我们将.nav元素的display属性设置为flex,这样它的子元素就可以使用flex布局了。接着,我们使用justify-content属性将子元素沿着水平方向均匀分布,使用align-items属性将子元素垂直居中对齐。最后,我们对a标签添加了一些样式,使导航栏看起来更加美观。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)