用HTML CSS JAVASCRIPT 写三个介绍家乡(四川内江)的网页 网页之间可以跳转
时间: 2024-03-25 18:37:53 浏览: 122
好的,我可以帮您提供一些思路和代码示例,让您更好地完成这个任务。
首先,我们可以创建三个不同的HTML页面,分别用于介绍家乡内江的不同方面。每个页面都包含一个标题、一段简要介绍和一个指向其他页面的链接。例如,我们可以创建一个名为`history.html`的页面,用于介绍内江的历史和文化:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内江历史文化</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>内江历史文化</h1>
<p>内江位于四川盆地中部,是一座拥有悠久历史和独特文化的城市。</p>
<a href="food.html">了解内江美食</a>
<a href="scenery.html">欣赏内江风光</a>
</body>
</html>
```
在这个页面中,我们使用了`<a>`标签来创建两个链接,分别指向其他两个页面。我们还使用了`<link>`标签来引入一个名为`style.css`的CSS样式表文件。
接下来,我们可以创建另外两个页面,分别用于介绍内江的美食和自然风光。例如,我们可以创建一个名为`food.html`的页面,用于介绍内江的美食和特产:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内江美食特产</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>内江美食特产</h1>
<p>内江有着丰富的美食文化,包括麻辣火锅、豆腐脑、蒸饺等。</p>
<a href="history.html">了解内江历史文化</a>
<a href="scenery.html">欣赏内江风光</a>
</body>
</html>
```
最后,我们可以创建一个名为`scenery.html`的页面,用于介绍内江的自然风光和旅游景点:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内江自然风光</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>内江自然风光</h1>
<p>内江拥有得天独厚的自然资源,包括岷江、乐山大佛等著名景点。</p>
<a href="history.html">了解内江历史文化</a>
<a href="food.html">了解内江美食特产</a>
</body>
</html>
```
在这个示例中,我们使用了相同的布局和样式,以便于用户在不同的页面之间切换时保持一致的视觉效果。我们还使用了一个名为`style.css`的CSS样式表文件,用于定义页面的颜色、字体、大小等样式。
最后,我们需要创建一个JavaScript文件,用于处理页面之间的跳转。例如,我们可以创建一个名为`script.js`的文件,用以下代码来实现页面之间的跳转:
```javascript
// 获取页面中所有的链接
var links = document.getElementsByTagName("a");
// 遍历所有的链接,为它们添加点击事件处理函数
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
// 获取链接的目标页面地址
var target = this.getAttribute("href");
// 跳转到目标页面
window.location.href = target;
// 取消默认行为,防止页面跳转
return false;
}
}
```
在这个代码中,我们获取了页面中所有的链接,并为它们添加了一个点击事件处理函数。当用户点击链接时,该函数会获取链接的目标页面地址,并使用`window.location.href`属性来跳转到目标页面。最后,我们使用`return false`语句来取消默认行为,防止页面跳转。
最后,我们需要在HTML页面中引入这个JavaScript文件。例如,在每个页面的`<head>`标签中添加以下代码:
```html
<script src="script.js"></script>
```
这样,当用户访问页面时,JavaScript文件就会被加载,并为页面中的链接添加点击事件处理函数,使它们可以相互跳转。
希望这些代码示例能对您有所帮助,祝您成功地创建三个介绍家乡内江的网页,并实现它们之间的跳转!
阅读全文