html怎么做两个页面
引言：为什么需要制作两个页面
当你正在制作网页时，你可能需要在一个文件中创建两个不同的页面。比如，如果你想为你的网站创建一个主页和一个联系页面，那么你需要制作两个不同的页面。在本文中，我们将介绍如何使用HTML制作两个页面。
第一步：创建HTML文件
首先，我们需要创建一个HTML文件。你可以使用文本编辑器（如Notepad ++）或HTML编辑器（如Sublime Text）来创建一个新的HTML文件。当你创建一个新文件时，请确保文件扩展名为.html。
第二步：设置页面结构
现在我们需要设置页面的基本结构。在HTML中，页面被封装在标签中。在标签中，我们需要创建两个不同的
```
```
在上面的代码中，我们创建了两个不同的div元素，分别用于存储主页和联系页面的内容。每个div元素都有一个唯一的ID（home和contact），这些ID将在稍后用于为每个页面定义样式和链接。
第三步：添加内容
现在我们需要向每个页面添加内容。对于主页页面，我们可以添加一些大的图片和欢迎信息。例如：
```
欢迎访问我的网站！
这里是主页的一些简介信息
```
同样的，你可以在联系页面中添加一些联系信息，如电子邮件地址、电话号码、社交媒体链接等。例如：
```
联系我们
如果您有任何问题或建议，请随时联系我们：
- 电子邮件地址：info@example.com
- 电话号码：1234567890
- 社交媒体链接：@example
```
第四步：链接
现在我们需要添加一个导航栏，以帮助用户在主页和联系页面之间进行导航。我们可以在 HTML 文件中使用链接来实现这一目的。
```
```
然后在CSS文件中为nav id添加样式：
```#nav{ background-color: #fff; list-style-type: none; margin: 0; padding: 0; position: fixed; top: 0; width: 100%;}#nav li{ display: inline; margin-right: 10px;}#nav li a{ color: #000; text-decoration: none; font-weight: bold;}#nav li a:hover{ color: #666;}```
上面的样式定义了导航栏的样式：白色背景、无序列表、固定在页面顶部等。
第五步：样式调整
最后，我们需要设置主页和联系页面的样式。你可以在CSS中定义每个页面的ID，并为它们设置不同的样式。例如：
```#home{ background-color: #eaeaea; padding: 50px;}#home h1{ font-size: 36px; margin-top: 0;}#home img{ float: right; margin-left: 20px; max-width: 50%;}#contact{ background-color: #f5f5f5; padding: 50px;}#contact h1{ font-size: 36px; margin-top: 0;}#contact ul{ list-style-type: none; margin: 0; padding: 0;}#contact ul li{ margin-bottom: 20px;}#contact ul li a{ color: #666; text-decoration: none; font-weight: bold;}```
在上面的代码中，我们使用ID选择器为每个页面设置了不同的样式。例如，我们可以通过更改背景颜色、添加内边距和设置字体大小来为主页页面添加样式。同样的，我们为联系页面添加了不同的样式：白色背景、无序列表和较小的字体大小等。
总结
在本文中，我们介绍了如何使用HTML制作两个页面。我们首先创建了HTML文件，然后设置了页面结构并添加了内容。我们还学习了如何在页面之间添加链接和导航栏，并为每个页面定义了样式。通过这些步骤，你可以快速创建一个功能强大的网站。