首页必须包含导航栏(至少5个导航项目),导航栏水平排列,其中两个导航项目分别链接到本站的另外两个网页,其余导航项目采用虚拟超链接。
时间: 2024-02-25 17:56:45 浏览: 21
好的,下面我将为你提供一个包含导航栏的HTML和CSS示例,满足你的要求。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的主页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
</header>
<main>
<h1>欢迎来到我的主页!</h1>
<p>这里是我个人的网站,我会在这里分享我的想法和创意。</p>
</main>
</body>
</html>
```
CSS代码:
```css
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
```
这个代码将创建一个包含导航栏的网站,其中有五个导航项目。前两个导航项目分别链接到关于我们和联系我们页面,其余的导航项目使用虚拟超链接。导航栏使用水平排列,并在顶部的header标签中。我们使用CSS来控制导航栏的颜色,间距和样式。
希望这可以帮助到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.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)