使用html,编写网页。要求网页有包含:“首页、单词,编程、听力、口语、短文、读书、炼句、课程、社区”的顶部横向导航条,且每个词都可以作为链接被点击,链接最终会链回本页面。
时间: 2023-07-10 13:19:58 浏览: 45
您可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页</title>
<style>
nav {
background-color: #444;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background-color: #666;
}
nav a:hover {
background-color: #888;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#word">单词</a></li>
<li><a href="#coding">编程</a></li>
<li><a href="#listening">听力</a></li>
<li><a href="#speaking">口语</a></li>
<li><a href="#short-essay">短文</a></li>
<li><a href="#reading">读书</a></li>
<li><a href="#sentence-practice">炼句</a></li>
<li><a href="#course">课程</a></li>
<li><a href="#community">社区</a></li>
</ul>
</nav>
<section id="home">
<h1>首页</h1>
<p>这是首页的内容。</p>
</section>
<section id="word">
<h1>单词</h1>
<p>这是单词的内容。</p>
</section>
<section id="coding">
<h1>编程</h1>
<p>这是编程的内容。</p>
</section>
<section id="listening">
<h1>听力</h1>
<p>这是听力的内容。</p>
</section>
<section id="speaking">
<h1>口语</h1>
<p>这是口语的内容。</p>
</section>
<section id="short-essay">
<h1>短文</h1>
<p>这是短文的内容。</p>
</section>
<section id="reading">
<h1>读书</h1>
<p>这是读书的内容。</p>
</section>
<section id="sentence-practice">
<h1>炼句</h1>
<p>这是炼句的内容。</p>
</section>
<section id="course">
<h1>课程</h1>
<p>这是课程的内容。</p>
</section>
<section id="community">
<h1>社区</h1>
<p>这是社区的内容。</p>
</section>
</body>
</html>
```
您可以根据需要修改样式和内容。