站点三个文件夹包含三个网页文件,一个img文件,一个css文件,一个JS文件
时间: 2024-02-04 15:03:59 浏览: 31
好的,我理解了您的要求。以下是一个简单的步骤:
1. 创建文件夹和文件
在你的本地计算机上创建一个新文件夹,命名为“myWebsite”。在该文件夹中创建三个子文件夹,分别命名为“index”,“products”和“contact”(用于存储主页、产品列表页和联系我们页面的 HTML 文件)。此外,我们还需要创建一个名为“img”的文件夹(用于存储网站中使用的所有图像文件)、一个名为“css”的文件夹(用于存储 CSS 样式文件)和一个名为“js”的文件夹(用于存储 JavaScript 文件)。
2. 编写 HTML 代码
打开 index 文件夹中的 index.html 文件并编写 HTML 代码。可以使用以下代码作为模板:
```
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript" src="../js/script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index/index.html">首页</a></li>
<li><a href="../products/products.html">产品列表</a></li>
<li><a href="../contact/contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h1>欢迎来到我的网站!</h1>
<p>这是我的主页</p>
<img src="../img/home.jpg" alt="主页图片">
</main>
</body>
</html>
```
这段代码包括了一个基本的 HTML 结构,以及一个顶部导航栏和一个主要内容区域。注意,我们在 head 中引用了我们之前创建的 CSS 和 JS 文件。
接下来,你需要按照相同的方式为 products 和 contact 文件夹中的 HTML 文件编写 HTML 代码,并根据需要修改它们的内容。
3. 添加 CSS 样式
现在我们需要添加一些 CSS 样式来美化我们的网站。可以将以下代码添加到一个名为 style.css 的新文件中,然后将它保存到 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 {
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
```
这段代码定义了一些基本的样式,包括页面的字体、背景色、颜色、间距等。你可以根据需要修改这些样式。
4. 添加 JavaScript 功能
最后,我们可以添加一些 JavaScript 功能来完善我们的网站。可以将以下代码添加到一个名为 script.js 的新文件中,然后将它保存到 js 文件夹中:
```
alert("欢迎来到我的网站!");
```
这段代码将在用户打开网站时弹出一个欢迎提示框。
5. 将图像文件复制到 img 文件夹中
在 img 文件夹中添加您需要使用的所有图像文件。
现在,我们已经完成了一个包含三个网页文件、一个 img 文件夹、一个 css 文件夹和一个 JS 文件夹的网站。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)