怎么编写一个网页,使得在进入该网站后有两行nav,其中第一行nav是几个网页都有的,第二个nav是该网址特有的
时间: 2024-03-16 18:45:45 浏览: 48
您可以按照以下步骤来编写一个包含两行导航栏的网站:
1. 创建一个 HTML 文件,并在文件中添加两个 `nav` 元素。
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<nav class="global-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav class="local-nav">
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</body>
</html>
```
2. 添加 CSS 样式来为两个导航栏设置样式,并使它们位于页面的顶部。
```css
nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #333;
color: #fff;
padding: 0 20px;
}
.global-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.global-nav li {
margin-right: 20px;
}
.local-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.local-nav li {
margin-right: 20px;
}
```
3. 在 HTML 文件中添加一些内容来测试导航栏是否正常工作。
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="global-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav class="local-nav">
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<h1>Welcome to My Website</h1>
<p>Here is some content for my website.</p>
</body>
</html>
```
这样就可以创建一个包含两个导航栏的网站了。全局导航栏包含了所有页面都有的链接,而本地导航栏包含了仅在该网站中存在的链接。