帮我写一个简单的导航网的代码
时间: 2023-07-15 18:11:20 浏览: 86
简单导航代码
好的,以下是一个简单的导航网的代码示例,仅供参考:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>导航网</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
nav ul li a:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<header>
<h1>导航网</h1>
</header>
<nav>
<ul>
<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>
<li><a href="#">社交</a></li>
<li><a href="#">购物</a></li>
</ul>
</nav>
</body>
</html>
```
CSS部分:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
nav ul li a:hover {
background-color: #ccc;
}
```
以上代码实现了一个简单的导航网,包括一个顶部的标题和一个导航栏。可以根据需要修改链接和样式。
阅读全文