制作一个只有三个页面的网站 内容自定 用css技术使它们只有相同的风格
时间: 2024-03-17 22:43:31 浏览: 21
好的,这是一个制作三个页面,且风格相同的网站的基本步骤:
1. 创建HTML页面
首先,你需要在文本编辑器中创建三个HTML页面。这些页面可以是你自己设计的任何内容,但是它们需要共享相同的CSS样式。为了方便,这里我提供一个简单的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="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</nav>
</header>
<main>
<!-- 主要内容 -->
</main>
<footer>
<!-- 网站页脚 -->
</footer>
</body>
</html>
```
这个模板包含了一个header,一个main和一个footer。header包含了网站的标题和菜单,main包含了网站的主要内容,footer包含了网站的页脚。你可以在main中添加你自己的内容,比如文本、图片和视频等等。
2. 创建CSS文件
接下来,你需要创建一个CSS文件,来控制网站的样式。在文本编辑器中创建一个新文件,将其命名为“style.css”,并将以下CSS代码复制到该文件中:
```css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* header样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
}
header nav li {
display: inline-block;
margin-right: 20px;
}
header nav li:last-child {
margin-right: 0;
}
header nav a {
color: #fff;
text-decoration: none;
}
header nav a:hover {
text-decoration: underline;
}
/* main样式 */
main {
padding: 20px;
}
/* footer样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这个CSS文件包含了全局样式、header样式、main样式和footer样式。它们可以控制网站的整体风格、菜单样式、主要内容的排版和页脚样式等等。
3. 将CSS文件链接到HTML页面
最后一步是将CSS文件链接到HTML页面中。在每个HTML页面的<head>标签中添加以下代码:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
这个代码会告诉浏览器去加载style.css文件,来渲染网站的样式。
以上就是制作一个只有三个页面的网站,且风格相同的基本步骤。你可以根据自己的需求来修改HTML模板和CSS文件中的样式,来创造出你自己的网站。