设计一个个性化的主题网页。 要求: 1. 主题自选。 2. 使用HTML、CSS和JavaScript进行实现。 3. 结构上至少包含两个网页,网站主页上要有导航栏、主要内容和页脚三部分。 4. 导航栏上具有菜单,相应功能要能够实现。 5. 主要内容中要有图片元素,要求实现图片的轮流播放功能。给出HTML,CSS,JS代码
时间: 2024-02-12 20:03:34 浏览: 103
以下是一个简单的个性化主题网页的HTML、CSS和JavaScript代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>My Personalized Website</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="about.html">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Welcome to My Website!</h1>
<p>Here you can find all the information about me and my work.</p>
<a href="#">Learn More</a>
</section>
<section id="gallery">
<img src="img/image1.jpg" alt="Image 1">
<img src="img/image2.jpg" alt="Image 2">
<img src="img/image3.jpg" alt="Image 3">
<img src="img/image4.jpg" alt="Image 4">
</section>
</main>
<footer>
<p>© 2021 My Personalized Website</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
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 {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 50px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
}
#gallery {
position: relative;
overflow: hidden;
}
#gallery img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#gallery img.active {
opacity: 1;
}
```
JavaScript代码:
```
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByTagName("img");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].classList.add("active");
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
```
注意:这只是一个简单的示例,实际上您可以根据自己的需求和喜好自由设计您的个性化主题网页。
阅读全文