hbuilder网页设计代码4页
时间: 2024-02-01 19:03:10 浏览: 72
以下是一个简单的4页网站设计的HTML代码示例,您可以在HBuilder中使用它来创建一个4页的网站:
主页(index.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站 - 主页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>欢迎来到我的网站!</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>我们提供专业的网站设计和开发服务。</h2>
<p>如果您需要一个现代化的网站,那么您来对地方了。</p>
<p>我们的团队由经验丰富的设计师和开发人员组成,可以为您提供高质量的服务。</p>
<a href="services.html">了解更多</a>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
关于我们页(about.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站 - 关于我们</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>欢迎来到我的网站!</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>我们是一家专业的网站设计和开发公司。</h2>
<p>我们的目标是为客户提供高质量的服务,并帮助他们在数字世界中取得成功。</p>
<p>我们的团队由经验丰富的专业人员组成,他们都具有广泛的技能和知识。</p>
<a href="services.html">了解我们的服务</a>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
服务页(services.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站 - 服务</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>欢迎来到我的网站!</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>我们提供各种服务,帮助您在数字世界中取得成功。</h2>
<ul>
<li>网站设计和开发</li>
<li>应用程序开发</li>
<li>数字营销</li>
<li>搜索引擎优化(SEO)</li>
<li>网站维护和支持</li>
</ul>
<a href="contact.html">联系我们以获取更多信息</a>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
联系我们页(contact.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站 - 联系我们</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>欢迎来到我的网站!</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>联系我们以获取更多信息。</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="发送">
</form>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
在这个示例中,我们创建了一个包括主页、关于我们页、服务页和联系我们页的简单网站。每个页面都有一个标题、一个导航菜单、一些主要内容和页脚信息。您可以根据需要修改和定制这些元素,以创建自己的网站。
阅读全文