使用HTML,css,JavaScript,写4个风景网站页面
时间: 2024-03-19 08:43:09 浏览: 16
很高兴为您提供帮助!以下是四个风景网站页面的示例代码:
1. 主页(index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scenic Website - Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Scenic Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to Scenic Website!</h2>
<p>Discover the most beautiful places on earth with us.</p>
<button>Explore now</button>
</main>
<footer>
<p>© 2021 Scenic Website. All rights reserved.</p>
</footer>
</body>
</html>
```
2. 关于页面(about.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scenic Website - About</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Scenic Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About Scenic Website</h2>
<p>We are a team of passionate travelers who love discovering and sharing the most beautiful places on earth. Our goal is to inspire and help people explore the world.</p>
<h3>Our Team</h3>
<ul>
<li>John Doe - Founder</li>
<li>Jane Smith - Editor</li>
<li>Mike Johnson - Photographer</li>
</ul>
</main>
<footer>
<p>© 2021 Scenic Website. All rights reserved.</p>
</footer>
</body>
</html>
```
3. 图库页面(gallery.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scenic Website - Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Scenic Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Gallery</h2>
<div class="gallery">
<img src="img/scenery1.jpg" alt="Scenery 1">
<img src="img/scenery2.jpg" alt="Scenery 2">
<img src="img/scenery3.jpg" alt="Scenery 3">
<img src="img/scenery4.jpg" alt="Scenery 4">
<img src="img/scenery5.jpg" alt="Scenery 5">
<img src="img/scenery6.jpg" alt="Scenery 6">
</div>
</main>
<footer>
<p>© 2021 Scenic Website. All rights reserved.</p>
</footer>
</body>
</html>
```
4. 联系页面(contact.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scenic Website - Contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Scenic Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button>Send</button>
</form>
</main>
<footer>
<p>© 2021 Scenic Website. All rights reserved.</p>
</footer>
</body>
</html>
```
以上是示例代码,您可以根据自己的需求进行修改和美化。需要注意的是,示例代码中的图片和样式文件需要根据您的实际情况进行修改和引用。