HTML, CSS, JS 网站开发:导航、轮播、标签、视频和图片区域
以下是一个使用 HTML, CSS 和 JavaScript 创建简单网站的示例,该网站包含一个五项链接的导航栏、一个轮播图片区域、一个标签区、一个视频区和一个图片区。
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>网站</title>
<meta charset='utf-8'>
<style>
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#slider {
width: 100%;
height: 300px;
position: relative;
}
#slider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#slider img:nth-child(2) {
animation: slide 15s infinite;
}
#slider img:nth-child(3) {
animation: slide 15s infinite;
animation-delay: 5s;
}
#slider img:nth-child(4) {
animation: slide 15s infinite;
animation-delay: 10s;
}
#slider img:nth-child(5) {
animation: slide 15s infinite;
animation-delay: 15s;
}
@keyframes slide {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33.33% {
opacity: 1;
}
53.33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#tags {
height: 100px;
background-color: #ccc;
}
#video {
width: 1500px;
height: 220px;
background-color: #eee;
}
#pictures {
width: 1500px;
height: 500px;
background-color: #ddd;
}
</style>
</head>
<body>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>视频</a></li>
<li><a href='#'>图片</a></li>
<li><a href='#'>音乐</a></li>
<li><a href='#'>关于</a></li>
</ul>
<div id='slider'>
<img src='image1.jpg'>
<img src='image2.jpg'>
<img src='image3.jpg'>
<img src='image4.jpg'>
<img src='image5.jpg'>
</div>
<div id='tags'></div>
<div id='video'></div>
<div id='pictures'></div>
</body>
</html>
CSS 代码:
CSS 代码设置了导航、轮播图、标签、视频和图片区域的样式。导航栏设置了背景颜色、文字颜色、悬停效果等。轮播图使用了 CSS3 动画效果实现图片轮流切换,每张图片停留 3 秒。标签区、视频区和图片区则设置了高度、宽度和背景颜色等样式。
注意:
- 轮播图的实现使用了 CSS3 动画,需要浏览器支持 CSS3 才能正常显示。
- 轮播图中的图片需要提前准备好,并设置好宽高。
- 代码中使用的图片路径 'image1.jpg'、'image2.jpg' 等需要替换为实际的图片路径。
通过这段代码,您可以创建一个简单的网站,包含导航、轮播图、标签、视频和图片区域。您可以根据自己的需求修改代码,例如添加更多的内容、改变样式等。
原文地址: https://www.cveoy.top/t/topic/okwj 著作权归作者所有。请勿转载和采集!