以下是一个使用 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' 等需要替换为实际的图片路径。

通过这段代码,您可以创建一个简单的网站,包含导航、轮播图、标签、视频和图片区域。您可以根据自己的需求修改代码,例如添加更多的内容、改变样式等。

HTML, CSS, JS 网站开发:导航、轮播、标签、视频和图片区域

原文地址: https://www.cveoy.top/t/topic/okwj 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录