html构建一个网站 3个页面,web网页搭建:HTML与CSS(一)
时间: 2024-01-15 13:03:09 浏览: 28
好的,让我为您提供一个简单的网站搭建方案,包含三个页面。以下是一个示例:
index.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="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>文章内容</p>
</article>
<article>
<h3>文章标题</h3>
<p>文章内容</p>
</article>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
about.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="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>关于我们</h2>
<p>我们是一家专业的网站开发公司,致力于为客户提供高质量的网站设计和开发服务。</p>
<p>我们的团队由经验丰富的开发人员、设计师和营销专家组成,可以满足各种不同类型的网站需求。</p>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
contact.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="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>联系我们</h2>
<p>如果您有任何问题或需要帮助,请随时与我们联系。</p>
<p>电话:123-456-7890<br>
邮箱:info@mywebsite.com<br>
地址:123 Main St.,Anytown,US</p>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
在这里,我们创建了一个简单的网站,包括首页、关于我们页面和联系我们页面。它们共享相同的样式表,使其具有一致的外观和感觉。
我们还使用了HTML5语义元素来更好地定义网页内容的结构。头部包含网站的标题、字符集和样式表链接。主体包括一个标题、导航和页面内容。底部包括版权信息。
CSS样式表(style.css)如下所示:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
article {
border: 1px solid #ccc;
margin-bottom: 20px;
padding: 10px;
}
footer {
background-color: #ccc;
color: #fff;
padding: 20px;
text-align: center;
}
```
这个样式表包含了一些基本的样式规则,例如字体、背景颜色、边框、内边距等。我们还定义了一些布局规则,例如网页的外边距和元素的显示方式。
希望这可以帮助您开始搭建自己的网站。如果您有任何问题或需要更多帮助,请随时问我。