设计一个web网站,里面最少包含三个页面,一个主页面,两个从页面代码
时间: 2024-02-28 17:56:14 浏览: 16
好的,以下是一个简单的Web网站的设计,它包含一个主页面和两个子页面的代码示例:
**主页面:index.html**
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站!</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<p>这是我的网站,我会在这里分享我的想法、经验和知识。请随意浏览我的博客,或者联系我了解更多信息。</p>
<img src="main.jpg" alt="主页图片">
</main>
<footer>
<p>© 2021 我的网站</p>
</footer>
</body>
</html>
```
**博客页面:blog.html**
```html
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h2>文章标题1</h2>
<p>这是我的第一篇文章。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id leo vel mauris consectetur euismod. Nunc euismod, ipsum quis malesuada imperdiet, sem turpis viverra velit, in bibendum risus nunc non dolor.</p>
<h2>文章标题2</h2>
<p>这是我的第二篇文章。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id leo vel mauris consectetur euismod. Nunc euismod, ipsum quis malesuada imperdiet, sem turpis viverra velit, in bibendum risus nunc non dolor.</p>
</main>
<footer>
<p>© 2021 我的网站</p>
</footer>
</body>
</html>
```
**联系页面:contact.html**
```html
<!DOCTYPE html>
<html>
<head>
<title>联系我</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>联系我</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="blog.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="发送">
<input type="reset" value="重置">
</form>
</main>
<footer>
<p>© 2021 我的网站</p>
</footer>
</body>
</html>
```
以上是一个简单的Web网站的设计,您可以根据您的具体需求进行修改和定制。