请用前端开发 制作一个页面两个导航栏(首页 、关于、探索、发现、网站、游戏、绘画)
时间: 2023-08-05 17:03:43 浏览: 142
好的,我可以为您提供基本的 HTML 和 CSS 代码,使您能够创建一个具有两个导航栏的页面。请按照以下步骤操作:
1. 首先,创建一个名为“index.html”的 HTML 文件,并将以下代码复制粘贴到文件中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-one">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">探索</a></li>
<li><a href="#">发现</a></li>
</ul>
</nav>
<nav class="nav-two">
<ul>
<li><a href="#">网站</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">绘画</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to my website!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec turpis euismod, imperdiet ante vel, fringilla massa. Etiam nec semper ante, eu hendrerit ex. Donec ut lectus ac arcu facilisis tempus. Phasellus vel porttitor est. Donec hendrerit quam euismod facilisis lacinia. Mauris ullamcorper dolor ac mauris varius, a facilisis nibh aliquet. Aliquam euismod, purus vitae tincidunt blandit, nisl libero bibendum odio, eget ullamcorper nibh ipsum vitae nulla. Curabitur auctor justo quis ex malesuada, sed tincidunt lorem molestie. Morbi auctor, neque et ultricies semper, lectus velit consectetur ex, quis ultrices arcu mauris ut elit. Integer nec tellus euismod, tristique diam vel, consequat mauris.</p>
</main>
</body>
</html>
```
2. 然后,创建一个名为“style.css”的 CSS 文件,并将以下代码复制粘贴到文件中:
```css
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav ul li a:hover {
background-color: #555;
}
.nav-one {
margin-right: auto;
}
.nav-two {
margin-left: auto;
}
```
3. 最后,将两个文件保存在同一目录下,并在浏览器中打开“index.html”文件以查看您创建的页面。
希望这可以帮助您创建您需要的页面!
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)