利用htmlcssjs写一个网站实现以下内容: 写一个包括五个超链接的导航导航内容包括首页视频图片音乐关于宽度为100然后再加上一个论播可以换五张图片每一张图片轮流三秒然后下面再标签界面长度100px再下面写1500px的视频区再加上1500px图片区 视频宽度和高度为300px220px
以下是一个简单的实现:
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代码中设置了导航的样式,包括背景色、文字颜色、悬停效果等;设置了轮播图的样式,使用了CSS3的动画效果实现图片轮流切换;设置了标签、视频和图片区的样式,包括大小和背景色等。
需要注意的是,轮播图的实现使用了CSS3的动画效果,需要在浏览器中支持CSS3才能正常显示。另外,轮播图中的图片需要提前准备好,并设置好宽高
原文地址: http://www.cveoy.top/t/topic/fEyU 著作权归作者所有。请勿转载和采集!