<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
position: relative;
background-color: cadetblue;
}
#cat{
width: 60px;
height: 50px;
background-image: url('./img/cat.png');
background-size: contain;
position: fixed;
right: 100px;
top: 50px;
cursor: pointer;
}
#box{
width: 500px;
height: 350px;
position: relative;
background-image: url('./img/1000065.jpg') ;
background-size: cover;
margin: 180px auto 0px ;
border-radius: 25px;
}
#box p{
cursor: pointer;
}
#box .p1{
color: whitesmoke;
font-size: 2em;
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 190px;
top: -50px;
}
#box .p2{
color: thistle;
position: absolute;
left: 20px;
top: 10px;
font-family: 'Times New Roman', Times, serif;
font-size: 2em;
}
#box .p2 span{
color: black;
}
#box .p30{
width: 20px;
position: absolute;
right: 50px;
top: 100px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p31{
width: 20px;
position: absolute;
right: 75px;
top: 130px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p32{
width: 20px;
position: absolute;
right: 100px;
top: 100px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p33{
width: 20px;
position: absolute;
right: 125px;
top: 130px;
color: ivory;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#box .p34{
position: absolute;
right: 0px;
top: 250px;
color: ivory;
}
#box .p4{
color: ivory;
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 150px;
bottom: 0px;
}
#earth{
width: 50px;
height: 50px;
background-image: url('./img/ground.png');
background-size: cover;
margin: 30px auto;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cat"></div>
<div id="box">
<p class="p1">Message</p>
<p class="p2">25<span>/</span>03</p>
<p class="p3">
<p class="p30">山河远阔，</p>
<p class="p31">人间烟火，</p>
<p class="p32">无一是你，</p>
<p class="p33">无一不是你。</p>
<p class="p34">——《江海共余生》</p>
</p>
<p class="p4">"I Am In LOVE With YOU"</p>
</div>
<a href="./html/birthday.html"><div id="earth"></div></a>
</body>
<script>
</script>
</html>
birthday.zip
需积分: 13 45 浏览量
2020-04-16
14:43:03
上传
评论
收藏 1.62MB ZIP 举报
birthday.zip （12个子文件） 
birthday img 
cat.png 12KB ground.png 4KB stop2.png 5KB
1000065.jpg 228KB stop1.png 1KB play1.png 2KB play2.png 5KB ss.png 175KB birthday.png 20KB
index.html 4KB html birthday.html 3KB
song.mp3 1.43MB资源评论
小蟹！
- 粉丝: 54
- 资源: 2
最新资源
- 使用ASP.NET Core和Entity Framework Core来构建一个基本的进销存系统.rar
- 深度学习经典数据集+FER2013面部表情识别+附带使用方法的python代码
- Python中，要实现连接多个相机并识别多个二维码.rar
- 使用FFT算法对一个信号进行分析.rar
- 171cms游戏应用下载系统源码.zip
- 基于jsp+servlet+mysql蛋糕甜品店购物网站源码+数据库（期末大作业）.zip
- Java项目:在线蛋糕商城系统(java+jsp+mysql)源码+数据库+期末大作业.zip
- ZapyaClient10_7-1.apk
- 织梦cms站长导航网站源码.zip
- 基于SSM+MySQL的网络投票调查问卷系统源码+数据库（java期末大作业）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
