<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春</title>
<style type="text/css">
html,body{height: 100%; width: 100%;margin: 0 auto;background-image: url("春背景.jpg");background-size: cover;}
.a{height: 100%;width: 97%;border: 0;margin: 25px 20px 0px 22px;background-image: url(透明背景.png);border-radius: 10px;}
.b{background-image: url("春天的诗.png");height: 390px;width: 93px;background-size: cover;margin-left: 150px;margin-top: 75px;float: left;}
#frame {/*----------图片轮播相框容器----------*/
position: absolute; /*--绝对定位，方便子元素的定位*/
width: 700px;
height: 400px;
overflow: hidden;/*--相框作用，只显示一个图片---*/
border-radius:5px;
margin: 200px 500px;
}
#photos img {
float: left;
width:700px;
height:400px;
}
#photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
position: absolute;z-index:9px;
width: calc(700px * 5);/*---修改图片数量的话需要修改下面的动画参数*/
}
.play{
animation: ma 15s ease-out infinite alternate;/**/
}
@keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
0%,20% { margin-left: 0px; }
25%,40% { margin-left: -700px; }
45%,60% { margin-left: -1400px; }
65%,80% { margin-left: -2100px; }
85%,100% { margin-left: -2800px; }
}
.b1{
width:1000px;
height:60px;
margin: 0 auto;
display: flex;
}
ul {
margin-top:30px;
list-style:none;
line-height:25px;
font-weight:bold;
}
li {
width:160px;
float:left;
margin:15px;
border:1px solid #ccc;
background-color:rgba(11, 12, 11, 0.6);
text-align:center;
}
li:hover {
background-color:#999;
}
.bg {
display:block;
padding:5px 10px;
color: rgba(128, 125, 240, 0.53);
text-decoration:none;
}
.bg:hover {
background-color:white;
color:black;
-webkit-transform:skew(-5deg,5deg);
display: block;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div id="frame" >
<div id="photos" class="play">
<img src="春诗1.png" >
<img src="春诗2.png" >
<img src="春诗3.png" >
<img src="春诗4.png" >
<img src="春诗5.png" >
</div>
</div>
<div class="b1"><ul>
<li><a href="首页.html" class="bg" target="_blank">首页</a></li>
<li><a href="春.html" class="bg" target="_blank">春天的诗</a></li>
<li><a href="夏.html" class="bg" target="_blank">夏天的诗</a></li>
<li><a href="秋.html" class="bg" target="_blank">秋天的诗</a></li>
<li><a href="冬.html" class="bg" target="_blank">冬天的诗</a></li>
</ul></div>
</div>
</body>
</html>
一个简单的HTML5网页设计
1星 需积分: 49 18 浏览量
2019-12-11
11:31:10
上传
评论 17
收藏 16.26MB 7Z 举报 
h5.7z （58个子文件） 
夏诗2.png 89KB 李白1.png 340KB 诗人3.png 73KB 诗人2.png 62KB
枫.jpg 464KB 秋.png 6KB 春诗4.png 59KB
诗人.html 877B 李白2.png 535KB 春背景.jpg 32KB 春诗5.png 64KB 秋天的诗.png 20KB 荷.jpg 138KB 诗人背景.jpg 52KB 烟花.jpg 114KB 夏天的诗.png 19KB 李白.html 855B 秋诗1.png 177KB 春.html 3KB 冬诗3.png 122KB 人.jpg 123KB 夏背景.jpg 115KB 骚客注册表.html 2KB 夏.html 3KB 冬.png 4KB
逆时针向 - 熹光.mp3 10.49MB 春.png 5KB 夏诗3.png 59KB 冬诗2.png 87KB 冬.html 2KB 春诗3.png 64KB 冬诗1.png 138KB 夏诗1.png 61KB 夏.png 5KB 夏诗5.png 134KB 秋诗2.png 61KB 首页.html 2KB 夏诗4.png 112KB 透明背景.png 13KB 冬天的诗.png 18KB 春诗1.png 235KB 注册成功.html 707B 恭喜你成为一名骚客！！！.png 23KB 诗人1.png 54KB 杜甫.html 684B 冬背景.jpg 483KB 柳.jpg 321KB 秋诗5.png 69KB 秋诗4.png 31KB 春天的诗.png 18KB 秋背景.jpg 710KB 恭喜恭喜.mp3 183KB 秋诗3.png 29KB 春诗2.png 84KB 雪.jpg 109KB 秋.html 3KB 骚客.png 13KB 杜甫1.png 540KB资源评论
weixin_424423392021-04-11真懒，不值当花钱下载
