设计一个个性化的主题网页。 要求: 1. 主题自选。 2. 使用HTML、CSS和JavaScript进行实现。 3. 结构上至少包含两个网页,网站主页上要有导航栏、主要内容和页脚三部分。 4. 导航栏上具有菜单,相应功能要能够实现。 5. 主要内容中要有图片元素,要求实现图片的轮流播放功能。给出HTML,CSS,JS代码
时间: 2024-02-12 11:03:28 浏览: 82
股票网站HTML5红色模板是一款适合股票网站的HTML5+CSS3模板下载。.zip
这是一个简单的个性化主题网页的示例,包括两个网页:主页和联系页面。主题为旅游,使用了HTML、CSS和JavaScript进行实现。具体要求如下:
1. 主题为旅游,主页上有导航栏、主要内容和页脚三部分,包括一个欢迎信息、一个简短的介绍、一个旅游景点的图片轮播和一个联系我们的表单。
2. 导航栏上具有菜单,可以通过点击导航栏上的链接切换到其他页面。
3. 联系页面包括一个简短的联系信息和一个联系我们的表单。
HTML代码(主页):
```html
<!DOCTYPE html>
<html>
<head>
<title>Travel Website - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Welcome to our travel website!</h1>
<p>Explore the world with us!</p>
</header>
<main>
<h2>Featured Destination: Paris</h2>
<div class="slideshow-container">
<div class="slideshow">
<img src="paris1.jpg" alt="Paris">
<img src="paris2.jpg" alt="Paris">
<img src="paris3.jpg" alt="Paris">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<form action="submit.php" method="post">
<label>Name:</label>
<input type="text" name="name">
<label>Email:</label>
<input type="email" name="email">
<label>Message:</label>
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</main>
<footer>
<p>© 2021 Travel Website</p>
</footer>
</body>
</html>
```
HTML代码(联系页面):
```html
<!DOCTYPE html>
<html>
<head>
<title>Travel Website - Contact</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Contact Us</h1>
<p>Get in touch!</p>
</header>
<main>
<p>For any inquiries, please use the form below:</p>
<form action="submit.php" method="post">
<label>Name:</label>
<input type="text" name="name">
<label>Email:</label>
<input type="email" name="email">
<label>Message:</label>
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</main>
<footer>
<p>© 2021 Travel Website</p>
</footer>
</body>
</html>
```
CSS代码:
```css
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
nav {
margin-bottom: 20px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #666;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1, h2 {
margin-bottom: 10px;
}
.slideshow-container {
position: relative;
margin: auto;
max-width: 800px;
}
.slideshow {
display: flex;
}
.slideshow img {
width: 100%;
height: auto;
}
.prev, .next {
position: absolute;
top: 50%;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
form {
margin-top: 20px;
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
input[type="text"], input[type="email"], textarea {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #333;
color: white;
padding: 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #666;
}
```
JavaScript代码:
```js
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
```
注意:由于这是一个简单的示例,其中的一些功能可能并不实用或安全,例如提交表单的功能在实际使用中需要更多的安全性和验证。
阅读全文