请用前端开发 制作一个页面两个导航栏(首页 、关于、探索、发现、网站、游戏、绘画)
时间: 2023-08-05 10:04:22 浏览: 43
好的,这是一个比较常见的页面布局,以下是一个简单的前端页面示例,包含两个导航栏和相应的内容区域:
```html
<!DOCTYPE html>
<html>
<head>
<title>双导航栏页面</title>
<style>
/* 两个导航栏的样式 */
.navbar {
display: flex;
flex-direction: row;
background-color: #333;
color: #fff;
height: 50px;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin: 0 10px;
font-size: 18px;
}
.navbar a:hover {
color: #ccc;
}
/* 内容区域的样式 */
.content {
margin-top: 20px;
padding: 20px;
font-size: 24px;
line-height: 1.5;
}
.content h2 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">探索</a>
<a href="#">发现</a>
</div>
<!-- 内容区域 -->
<div class="content">
<h2>欢迎来到双导航栏页面</h2>
<p>这是一个简单的前端页面示例,包含两个导航栏和相应的内容区域。你可以根据自己的需求修改导航栏的链接和内容区域的内容。</p>
<p>下面是第二个导航栏:</p>
<!-- 底部导航栏 -->
<div class="navbar">
<a href="#">网站</a>
<a href="#">游戏</a>
<a href="#">绘画</a>
</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 `flex` 布局来实现两个导航栏的排列,利用 `justify-content: space-between` 属性让两个导航栏之间保持一定的距离。内容区域的样式可以根据需求进行修改,例如调整字体大小、行高等。