用弹性布局制作导航栏
时间: 2024-01-26 22:13:01 浏览: 18
以下是使用弹性布局制作导航栏的示例代码:
```html
<style>
.navbar {
display: flex;
justify-content: space-between;
background-color: #f2f2f2;
padding: 10px;
}
.navbar ul {
display: flex;
list-style-type: none;
}
.navbar li {
margin-right: 10px;
}
.navbar a {
text-decoration: none;
color: #333;
padding: 5px;
}
</style>
<nav class="navbar">
<div class="logo">
<a href="#">Logo</a>
</div>
<ul class="menu">
<li><a href="#">主页</a></li>
<li><a href="#">学校概况</a></li>
<li><a href="#">教学科研</a></li>
<li><a href="#">招生就业</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
```
这段代码使用了弹性布局(flexbox)来创建导航栏。`.navbar` 类设置了导航栏的样式,包括背景颜色、内边距和弹性布局。`.navbar ul` 类设置了导航栏中的无序列表的样式,`.navbar li` 类设置了列表项的样式,`.navbar a` 类设置了链接的样式。
你可以根据需要修改样式和内容来适应你的导航栏设计。