html构建一个网站 3个页面,web网页搭建:HTML与CSS(一)
时间: 2024-01-15 22:03:03 浏览: 58
好的,我会尽力回答你的问题。首先,如果你想构建一个网站,你需要了解 HTML 和 CSS。HTML 是超文本标记语言,用于创建网页结构,而 CSS 是层叠样式表,用于控制网页的外观和样式。
接下来,我将为你介绍如何使用 HTML 和 CSS 构建一个简单的网站,包括 3 个页面。首先,我们需要创建一个 HTML 文件,它将作为我们网站的骨架。在这个文件中,我们将包含各种 HTML 元素,如标题、段落、图像和链接等。
下面是一个简单的 HTML 文件示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<link rel="stylesheet" type="text/css" 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>
<img src="img/me.jpg" alt="我的照片">
<a href="about.html">了解更多</a>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
在上面的代码中,我们定义了一个 HTML 文档的基本结构,并使用了一些常见的 HTML 元素,如 `<head>`、`<body>`、`<header>`、`<nav>`、`<main>` 和 `<footer>`。我们还包含了一个外部样式表文件 `style.css`,用于定义网站的样式。
接下来,我们需要创建一个 CSS 文件,用于控制网站的外观和样式。在这个文件中,我们将使用各种 CSS 属性,如字体、颜色、背景和布局等。
下面是一个简单的 CSS 文件示例:
```css
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
h1, h2 {
font-weight: normal;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
在上面的代码中,我们定义了一些常见的 CSS 属性,如字体、颜色、背景和布局。我们还使用了一些 CSS 选择器,如 `body`、`header`、`nav`、`main`、`h1`、`h2`、`img` 和 `a`,来选择不同的 HTML 元素并应用样式。
最后,我们需要创建 3 个 HTML 文件,分别是首页、关于我们和联系我们。这些文件将使用相同的 HTML 和 CSS 模板,但内容会有所不同。
希望这个简单的示例能够帮助你了解如何使用 HTML 和 CSS 构建一个简单的网站。如果你有任何问题,请随时问我。